Question

我正在尝试在点击事件上加载拇指图像的数据标题，然后在为拇指图像更改主图像时更新主图像数据标题。似乎无法通过图像更改来更新数据标题。

    jQuery(document).ready(function() {
    jQuery('.thumbnail').on('click', function() {
        jQuery('#mainImage').hide();
        jQuery('#mainImageContainer').css('background-image', "url('images/loading.gif')");
        var i = jQuery('<img />').attr('src',this.href).attr('caption',this.data).load(function() {
            jQuery('#mainImage').attr('src', i.attr('src')).attr('caption', i.attr('caption'));
            jQuery('#mainImageContainer').css('background-image', 'none');
            jQuery('#mainImage').fadeIn();
            jQuery('.fancybox').attr('href', i.attr('src'));
            jQuery("a[href$='.jpg'],a[href$='.jpeg']").attr('rel', 'gallery').fancybox();
        });
        return false; 
    });

    jQuery('.fancybox').fancybox();

});

<div id="mainImageContainer">
    <a class="fancybox" href="main-image.jpg">
        <img id="mainImage" src="main-image.jpg" data-caption="main image caption" />
    </a>
</div>
<ul>
    <li>                            
        <a class="thumbnail" href="thumb-image-1.jpg">
            <img class="thumbImages" src="thumb-image-1.jpg" data-caption="thumb image 1 caption" />
        </a>
    </li>
    <li>
        <a class="thumbnail" href="thumb-image-2.jpg">
            <img class="thumbImages" src="thumb-image-2.jpg" data-caption="thumb image 2 caption" />
        </a>
    </li>
    <li>
        <a class="thumbnail" href="thumb-image-3.jpg">
            <img class="thumbImages" src="thumb-image-3.jpg" data-caption="thumb image 3 caption" />
        </a>
    </li>
</ul>

Answer 1

我不确定this.data会返回什么。但通常情况下，如果您想避免在从元素的data-属性和jQuery的data对象/事物中加载值之间产生混淆。尝试明确调用$(this).attr("data-caption")

什么可能会让你朝着正确的方向前进（尽管还没有测试过）：

var $this = $(this);
var captionValue = $this.attr("data-caption");
var i = jQuery('<img />').attr('src',this.href).attr('caption',captionValue);

jQuery更新主图像标题与点击事件上的拇指图像标题

1 个答案: