Question

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

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文本更新为当前显示的图像？

Answer 1

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

您可以使用imgNumber检索正确的拇指图像，获取其替代文字，然后使用它更新说明元素：

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

Answer 2

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

Answer 3

这是因为您的代码（$('#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);
    }

图片库下一个按钮更新alt来自ID

3 个答案: