1

我需要在一个简单的图片库上发生 3 件事，在悬停时更改主大图，点击（在大图上），打开一个模态框。问题是我不知道如何将唯一链接附加到动态加载的图像，这是我目前所拥有的：

jQuery：

$('#thumbs ul li a').hover(

function() {
    var currentBigImage = $('#bigpic img').attr('src');
    var newBigImage = $(this).attr('href');
    var currentThumbSrc = $(this).attr('rel');
    switchImage(newBigImage, currentBigImage, currentThumbSrc);
}, function() {});

function switchImage(imageHref, currentBigImage, currentThumbSrc) {
    var theBigImage = $('#bigpic img');
    if (imageHref != currentBigImage) {
        theBigImage.fadeOut(250, function() {
            theBigImage.attr('src', imageHref).fadeIn(250);
            var newImageDesc = $("#thumbs ul li a img[src='" + currentThumbSrc + "']").attr('alt');
            $('p#desc').empty().html(newImageDesc);
        });
    }
}

$('#thumbs ul li a').click(function(e) {
    e.preventDefault();
});​

HTML：

<div id="thumbs">
    <ul>
        <li><a rel="http://www.test25.net/prestashop1-gallery/images/rings/thumbnails/ring01.jpg" href="http://www.test25.net/prestashop1-gallery/images/rings/large/ring01_L.jpg"><img src="http://www.test25.net/prestashop1-gallery/images/rings/thumbnails/ring01.jpg" alt="Ring 1"/></a></li>
        <li><a rel="http://www.test25.net/prestashop1-gallery/images/rings/thumbnails/ring02.jpg" href="http://www.test25.net/prestashop1-gallery/images/rings/large/ring02_L.jpg"><img src="http://www.test25.net/prestashop1-gallery/images/rings/thumbnails/ring02.jpg" alt="Ring 2"/></a></li>
    </ul>
    <ul>
        <li><a rel="http://www.test25.net/prestashop1-gallery/images/rings/thumbnails/ring07.jpg" href="http://www.test25.net/prestashop1-gallery/images/rings/large/ring07_L.jpg"><img src="http://www.test25.net/prestashop1-gallery/images/rings/thumbnails/ring07.jpg" alt="Ring 7"/></a></li>
        <li><a rel="http://www.test25.net/prestashop1-gallery/images/rings/thumbnails/ring08.jpg" href="http://www.test25.net/prestashop1-gallery/images/rings/large/ring08_L.jpg"><img src="http://www.test25.net/prestashop1-gallery/images/rings/thumbnails/ring08.jpg" alt="Ring 8"/></a></li>
    </ul>
</div>
<div id="bigpic">
    <img src="http://www.test25.net/prestashop1-gallery/images/rings/large/ring01_L.jpg" alt="First Main Image"/>
    <p id="desc">
        Move your mouse over the images on the left to view here...
    </p>
</div>

​</p>

演示

Any ideas?
4

1 回答 1

0

你可以这样做：

function switchImage(imageHref, currentBigImage, currentThumbSrc) {
    var theBigImage = $('#bigpic img');
    if (imageHref != currentBigImage) {
        theBigImage.fadeOut(250, function() {
            theBigImage.attr('src', imageHref).fadeIn(250);
            var newImageDesc = $("#thumbs ul li a img[src='" + currentThumbSrc + "']").attr('alt');
            $('p#desc').empty().html(newImageDesc);
        });
        theBigImage.off('click').on('click', function() {
            alert('open modal box');
        });
    }

}

见 .on() .off()

于 2012-11-02T23:00:21.187 回答