0

我在一个带有一个图像的容器附近有一个图像列表（拇指）。我想让jQuery统计<a>元素的索引，然后替换下图src属性的个数。

我的意思是，考虑到这段代码：

<ul class="thumbs">
    <li><a href="#"><img src="img1.jpg" alt="image here"/></a></li>
    <li><a href="#"><img src="img2.jpg" alt="image here"/></a></li>
    <li><a href="#"><img src="img3.jpg" alt="image here"/></a></li>
    <li><a href="#"><img src="img4.jpg" alt="image here"/></a></li>
</ul>

<div class="container">
    <img src="img1.jpg" alt="destiny image here"/>
</div>

预期的行为是，当用户单击第二个时<a>，将.container img其 src 属性更改为img1.jpg. 当单击第四个<a>属性应更改为img3.jpg。

我已经做到了这一点：jsFiddle 演示 

$(document).ready(function() {
    $(".thumbs li a").click(function () {
        //$('div.container').toggleClass('on');
        var index = $(".thumbs li a").index(this);
        $("div.container img[src^='img']").replaceWith("img" + index + ".jpg");
    });
});

它并没有绝对什么都不做。我认为无法正确理解 .replaceWith 方法。

此外，注释行在单独时工作正常......当其余代码存在时div.container，不要更改其类。这与我声明变量的方式有关吗？

4

2 回答 2

3

您不是在替换属性，而是在替换 img 元素。

您需要使用 设置属性.attr('src', value)。

replaceWith()用于将元素替换为其他 html 元素。

于 2013-07-23T18:31:26.483 回答
3

保持简单，摆脱索引。只需获取src. 使用此代码：

$(document).ready(function() {
    $(".thumbs li a").click(function () {
        //Get the src of the clicked image
        var src = $(this).find('img').attr('src');

        //Set the src to the container image
        $("div.container img").attr('src', src);
    });
});

演示：http: //jsfiddle.net/Stijntjhe/HvTpv/5/

于 2013-07-23T18:36:12.080 回答