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 demo

$(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/

用jQuery中的索引值替换属性

2 个答案: