使用jQuery交换图像

Question

我在网页上有几篇文章，每篇文章都有一个主图像和一些按钮来加载和交换主图像。下面我的jQuery脚本的问题是它影响了所有文章中的所有主要图像，我只想在文章中交换主要图像，我点击它的按钮。这可能吗？

HTML（我在网页上有几篇这样的文章）：

<article class='post'>
<header><h2>Metropolis</h2></header>
<img src='images/buildings/large/metropolis-1.jpg' alt='Metropolis Köpenhamn' class='postImg mainImage' >
<div class='infoContainer'>
<div class='buttonContainer'>
<ul>
<li><a href='images/buildings/large/metropolis-1.jpg' >1</a></li>
<li><a href='images/buildings/large/metropolis-2.jpg' >2</a></li>
<li><a href='images/buildings/large/metropolis-2.jpg' >3</a></li>
</ul>
</div>
</div>
<div class='plus'><img src='images/icons/arrow-down.png'></div>
</article>

jQuery的：

    $(".buttonContainer ul li a").click(function(event) {
    $(".loader").show();
    var btnNum = $(".buttonContainer a").index(this);
    var btnUrl = $(this).attr("href");
    var imgNew = $("<img />").attr("src", btnUrl).load(function() {
        $(".mainImage").attr("src", imgNew.attr("src"));
    $(".loader").hide();
    });
     return false;
});

Answer 1

$(".buttonContainer ul li a").click(function(event) {
 var btnUrl = $(this).attr("href");
 $(this).parents(".post").find(".mainImage").attr("src",btnUrl);
});

  

<强>更新

修改（未选中）

  $(".buttonContainer ul li a").click(function(event) {
 var btnUrl = $(this).attr("href");
  $(".loader").show();
  $(this).load(function{ $(".loader").hide();});
 $(this).parents(".post").find(".mainImage").attr("src",btnUrl);
});