图片库下一步按钮从 ID 更新 alt答案

【问题标题】：Image gallery next button update alt from ID图片库下一步按钮从 ID 更新 alt
【发布时间】：2013-02-19 06:05:29
【问题描述】：

我正在尝试制作一个简单的图片库。这就是我现在拥有的：

var NumberOfImages = 7;

var img = new Array(NumberOfImages);

img[0] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number0.jpg";
img[1] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number1.jpg";
img[2] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number2.jpg";
img[3] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number3.jpg";
img[4] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number4.jpg";
img[5] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number5.jpg";
img[6] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number6.jpg";

var imgNumber = 0

    function NextImage() {
        imgNumber++;
        if (imgNumber == NumberOfImages) {
            imgNumber = 0;
        }    
        document.images["largeImage"].src = img[imgNumber];
    }

    function PreviousImage() {
        imgNumber--;
        if (imgNumber < 0) {
            imgNumber = NumberOfImages - 1;
        }
        document.images["largeImage"].src = img[imgNumber];
    }

$(document).ready(function() {
    $('#thumbs').delegate('img', 'click', function() {
        imgNumber = $(this).attr('id');
    });
});

$('#thumbs').delegate('img', 'click', function () {
    $('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
    $('#description').html($(this).attr('alt'));
});

问题：当我点击next 和previous 按钮时，描述的替代文字没有相应改变。只有当我单击缩略图时才会这样做。

如何将alt 文本更新为当前显示的任何图像？

【问题讨论】：

标签： javascript jquery attributes image-gallery alt

【解决方案1】：

图像标题没有通过单击箭头按钮设置，因为它们调用的函数（NextImage 和 PreviousImage）没有任何更新它的代码。

您可以使用imgNumber 检索正确的缩略图，获取它的替代文本，并使用它更新描述元素：

$('#description').html($('#'+imgNumber).attr('alt'));

【讨论】：

【解决方案2】：

这是由于您的代码 ($('#description').html($(this).attr('alt'));) 而导致的，其中 this 指的是小拇指。所以你正在从拇指中获取替代文本。

尝试像上面对图像所做的那样在数组中创建描述。

var desc = new Array(NumberOfImages);

`desc[0] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number0.jpg";
desc[1] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number1.jpg";
desc[2] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number2.jpg";
desc[3] = "http://www.kidsmath`

在这里打电话

    function NextImage() {
        imgNumber++;
        if (imgNumber == NumberOfImages) {
        imgNumber = 0;
        }    
        document.images["largeImage"].src = img[imgNumber];
        var desc = desc[imgNumber];
        $('#description').text(desc);
    }

    function PreviousImage() {
        imgNumber--;
        if (imgNumber < 0) {
        imgNumber = NumberOfImages - 1;
        }
        document.images["largeImage"].src = img[imgNumber];
        var desc = desc[imgNumber];
        $('#description').text(desc);
    }

【讨论】：

【解决方案3】：

http://jsfiddle.net/rgvqA/2/ 您只是忘记在 next 和 prev 函数中更新您的 $('#description') 元素

【讨论】：

顺便说一句，您在页面加载时有错误的#description 值。这是一个零图像）