Question

我有两个匹配的div是兄弟姐妹，每个都有2个图像。我默认在每个兄弟div中显示一个图像，另一个隐藏。然后我有一个控件来点击隐藏当前图像并显示另一个。

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

我在遍历中相当通用，而不是很多特定的类，我需要保持这种方式。

感觉我错过了一些非常简单的事情，或者我不理解.eq（）如何以某种方式工作，限制了第一个＆＃34; .images＆＃34; 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

itemImage将是一个计数数组4

eq(0)和eq(1)您只在第一个div中定位img标记

对于第二个div，它应该是eq(2)和eq(3)

var itemImage还存在范围问题。事件处理程序$(document).on("click" , ".js-angle" , function(){...}无法访问此变量

以下代码应该适合您。

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

 var itemImage = $(this).parent().prev().find(".images:first img"); // this line is updated

 $(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 bikeImage = $(this).parent().prev().find("images:nth-child(2) img"); // this line is updated

 $(bikeImage).eq(0).fadeOut(200); // itemImage changed to bikeImage 
 $(bikeImage).eq(1).fadeIn(200);  // itemImage changed to bikeImage 

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

 return false;
 })

Jquery只更新第一个匹配div

1 个答案: