javascript - Jquery 只更新第一个匹配的 div 中的元素

Question

我有两个匹配的 div，它们是 sibling ，它们每个都有 2 个图像。默认情况下，我在每个同级 div 中显示一个图像，另一个隐藏。然后我有一个控件来单击以隐藏当前图像并显示其他图像。

我的问题是只有第一个 div 中的图像在更新，第二个 div 中的图像没有改变。

我的遍历相当通用，没有很多特定的类，我需要保持这种方式。

感觉好像我遗漏了一些非常简单的东西，或者我可能不理解 .eq() 的工作方式以某种方式限制了对第一个“.images”div 的更改？

如何解决这个问题，让两个 div 中的图像同时更改？

我的 html 基本上是:

<div class="main">
  <div class="image-group">
    <h2> Title </h2>

    <div class="color-selection">
        <img alt="Black and Red" title="Black and Red">
        <img alt="Black and Matte Black" title="Black and Matte Black">
    </div>

    <div class="images">
        <img style="display: inline;">    
        <img style="display: none;">   
   </div>

   <div class="images">
        <img style="display: inline;">    
        <img style="display: none;">
   </div>

  </div><!--end image group -->

  <div class="image-swap">
    <i class="js-profile current">View 1</i>
    <i class="js-angle">View 2</i>
  </div>
</div><--/end main -->

和jquery:

 $(document).on("click" , ".js-profile" , function(){

 var itemImage = $(this).parent().prev().find(".images img");

 $(itemImage).eq(1).fadeOut(200);
 $(itemImage).eq(0).fadeIn(200);

 $(this).addClass("current");
 $(this).next().removeClass("current");

 return false;

 })


 $(document).on("click" , ".js-angle" , function(){

 var itemImage = $(this).parent().prev().find("images img");

 $(itemImage).eq(0).fadeOut(200);
 $(itemImage).eq(1).fadeIn(200);

 $(this).addClass("current");
 $(this).prev().removeClass("current");

 return false;
 })

Answer 1

首先，你有一些命名问题:

var bikeImage = $(this).parent().prev().find("images img");
$(itemImage).eq(0).fadeOut(200);

应该是

var itemImage = $(this).parent().prev().find(".images img");
$(itemImage).eq(0).fadeOut(200);

让我们假设这是由于将它发布在那里并专注于主要问题。

$(this).parent().prev().find(".images img");

这总是返回一组四张图像，而不是某个 2x2 矩阵，所以

$(itemImage).eq(0).fadeOut(200);
$(itemImage).eq(1).fadeIn(200);

这部分始终以第一组图像为目标，因为它们的索引为 0 和 1，其他两个图像的索引为 2 和 3。所以是的，eq 做了一些超出您预期的事情，因为您的选择与您想象的不同。

简单的解决方案就是像这样过滤

$(itemImage).filter(':first-child').fadeOut(200);
$(itemImage).filter(':last-child').fadeIn(200);

这再次采用一组 4 张图像，但不将查询限制为索引 0 或 1，而是限制为 first-child，因此它获取两个子集的第一张图像。