0

1 つの画像を含むコンテナの近くに画像 (親指) のリストがあります。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>

予想される動作は、ユーザーが 2 番目の をクリックすると、<a>その.container imgsrc 属性が に変更されることimg1.jpgです。4 番目をクリックすると<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 に答える