0

我有一个列出了多个购物车项目。当客户将鼠标悬停在购物车项目上时，我有一个“x 战警标志”外观的删除按钮，我想在项目旁边淡入。

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

所以我四处搜索并认为.each()是我的救星。我一直试图让它工作，但没有运气。当我尝试实现它时，我的脚本就中断了。

任何人对此 * .each()事物以及如何将其实现到我的脚本中都有任何指示？*

我尝试cartItem.each(function(){在 mouseEnter/mouseLeave 事件周围放置一个（并使用一些$(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>

我在这里先向您的帮助表示感谢。你们总是在这里震撼我的世界。我需要你（直到现场直播才能回家...... :(

4

2 回答 2

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);
     });        
});
于 2012-09-07T03:43:08.390 回答
0

你有多个 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);
    });
});
于 2012-09-07T03:43:38.203 回答