当有 srcset 时，更改图像 src 不起作用

Question

我有以下代码

<div class="row">
    <div class="col-md-4 product-image">
        <img width="295" height="982" src="http://localhost/2017/ltru/wp-content/uploads/2017/03/IMG_8576-copy-1.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://localhost/2017/ltru/wp-content/uploads/2017/03/IMG_8576-copy-2.png 295w, http://localhost/2017/ltru/wp-content/uploads/2017/03/IMG_8576-copy-2-90x300.png 90w" sizes="(max-width: 295px) 100vw, 295px"> </div>
    <div class="col-md-8">
        <h4 class="ltru-underline ltru-inline">Product 4</h4>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p></p>
        <div class="product-thumbs">
            <a href="http://localhost/2017/ltru/wp-content/uploads/2017/03/IMG_8576-copy-1.png">
                <img src="http://localhost/2017/ltru/wp-content/uploads/2017/03/IMG_8576-copy-1.png" alt="">
            </a>
            <a href="http://localhost/2017/ltru/wp-content/uploads/2017/03/IMG_8576-copy-2.png">
                <img src="http://localhost/2017/ltru/wp-content/uploads/2017/03/IMG_8576-copy-2.png" alt="">
            </a>
            <a href="http://localhost/2017/ltru/wp-content/uploads/2017/03/IMG_8576-copy-3.png">
                <img src="http://localhost/2017/ltru/wp-content/uploads/2017/03/IMG_8576-copy-3.png" alt="">
            </a>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

我试图用以下JS更改.product-image img src属性：

$('.product-thumbs a').on('click', function(e){
        e.preventDefault();
        var src = $(this).attr('href');
        var main_img = $(this).closest('.product-detail').find('.product-image img');
        main_img.attr('src', src);
});

我可以从JS控制台看到.product-image img src在单击产品拇指时正在发生变化，但图像不会更改。 srcset是引起这个吗？

Answer 1

尝试更改srcset属性以及src属性：

$('.product-thumbs a').on('click', function(e){
        e.preventDefault();
        var src = $(this).attr('href');
        var main_img = $(this).closest('.product-detail').find('.product-image img');
        main_img.attr('src', src);
        main_img.attr('srcset', src); // <-- changing srcset attribute
});

Answer 2

我认为您的img选择不正确。实际上.product-image img将为您提供.product-image中的所有图像以及您的拇指，因此在.product-image img之间使用>尝试

var main_img = $(this).closest('.product-detail')
           .find('.product-image > img'); // now it will give you a single object and src will be applied to that one only.

可以是一个更好的选项，使用该img的类名称，以便很容易获得该图像，

var main_img = $(this).closest('.product-detail')
           .find('.product-image img.wp-post-image'); // no need to use > in this case