将jQuery中的属性替换为索引值

Question

我在一个容器附近有一个图像列表（拇指），其中只有一个图像。我希望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不会更改其类。这与我声明变量的方式有关吗？

Answer 1

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

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

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

Answer 2

保持简单，去掉索引。只要拿到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/