Question

我有，列出了多个购物车项目。我有一个“x-men徽标”，当顾客将鼠标悬停在购物车项目上时，我会想要在项目旁边淡入淡出按钮。

当列表中只有一个项目时，我没有问题。但是，当购物车中有多个商品时，jQuery会运行时髦。它仍然可以淡入淡出，但只有当我将鼠标悬停在购物车中的最后一个项目上时，当然所有“删除X”图像都可见。啊...

所以我四处搜寻并认为 .each（）是我的救世主。我一直试图让它运作，没有运气。当我尝试实现它时，我的脚本就会中断。

任何人都有关于此 .each（） 的事情，以及如何在我的脚本中实现它？ *

我尝试在mouseEnter / mouseLeave事件周围添加cartItem.each(function(){（并使用一些$(this)选择器使其“有意义”）并且没有做任何事情。在没有运气的情况下尝试了其他一些事情......

我通常会使用自己的id而不是使用类来创建每个删除按钮，然后使用我们的ASP文件中的（i）填充该值，然后为每个重复下面的内容，但必须有另一种方法。这是不必要的......不是吗？

这是HTML（抱歉，有很多）：

<ul id="head-cart-items">
 <!-- Item #1 -->
 <li>
  <!-- Item #1 Wrap -->
  <div class="head-cart-item">

   <div class="head-cart-img" style='background-image:url("/viewimageresize.asp?mh=50&amp;mw=50&amp;p=AFE&amp;f=Air_Intakes_Magnum_FORCE_Stage-1_PRO_5R")'>
   </div>

   <div class="head-cart-desc">
    <h3>
     <a href="/partdetails/AFE/Intakes/Air_Intakes/Magnum_FORCE_Stage-1_PRO_5R/19029">AFE Magnum FORCE Stage-1 PRO 5R Air Intakes</a>
    </h3>
    <span class="head-cart-qty">Qty: 1</span>
    <span class="head-cart-price">$195.00</span>

    <!-- Here is my Remove-X... -->
    <a class="remove-x" href='/cart//7806887'>
     <img src="/images/misc/remove-x.png">
    </a>
   </div>

  </div>
 </li>

 <!-- Item #2 -->
 <li>
  <!-- Item #2 Wrap -->
  <div class="head-cart-item">

   <div class="head-cart-img" style='background-image:url("/viewimageresize.asp?mh=50&amp;mw=50&amp;p=Exedy&amp;f=Clutch_Kits_Carbon-R")'>
   </div>

   <div class="head-cart-desc">
    <h3>
     <a href="/partdetails/Exedy/Clutch/Clutch_Kits/Carbon-R/19684">Exedy Carbon-R Clutch Kits</a>
    </h3>
    <span class="head-cart-qty">Qty: 1</span>
    <span class="head-cart-price">$2,880.00</span>

    <!-- Here is my other Remove-X... -->
    <a class="remove-x" href='/cart//7806888'>
     <img src="/images/misc/remove-x.png">
    </a>
   </div>

  </div>
 </li>
</ul>

这是jQuery ......

$(document).ready(function(){

    var removeX = $(".remove-x");
    var cartItem = $(".head-cart-item");

    // Start with an invisible X
    removeX.fadeTo(0,0);

    // When hovering over Cart Item
    cartItem.mouseenter(function(){

        // Fade the X to 100%
        removeX.fadeTo("normal",1);

        // On mouseout, fade it back to 0%
        $(this).mouseleave(function(){
            removeX.fadeTo("fast",0);
        });

    });

});

如果你没有看到它，这就是我试图消失的“X”......

    <!-- Here is my Remove-X... -->
    <a class="remove-x" href='/cart//7806887'>
     <img src="/images/misc/remove-x.png">
    </a>

提前感谢您的帮助。你们总是在这里摇滚我的世界。我需要你（不能回家直到这是现场...... :(

Answer 1

这是this/$(this)非常有用的地方

$(document).ready(function(){
    var cartItem = $(".head-cart-item");

    // Start with an invisible X
    $('.remove-x').fadeTo(0,0);

    // When hovering over Cart Item
    cartItem.mouseenter(function(){           
       // Fade the X to 100%
       $('.remove-x',this).fadeTo("normal",1);    
       // On mouseout, fade it back to 0%
     }).mouseleave(function(){
        $('.remove-x',this).fadeTo("fast",0);
     });        
});

Answer 2

你有多个remove-x元素，所以它的淡化只是最后一个。试试这个。

// When hovering over Cart Item
cartItem.mouseenter(function(){
    var removeX = $(this).find(".remove-x");
    // Fade the X to 100%
    removeX.fadeTo("normal",1);


    // On mouseout, fade it back to 0%
    $(this).mouseleave(function(){
            removeX.fadeTo("fast",0);
    });
});

你如何使用jQuery的.each（）将相同的脚本应用于具有相同类的每个元素？

2 个答案: