Question

I have a with multiple cart items listed. I have a “x-men logo” looking remove button that I want to fade-in next to the item when the customer hovers over a cart item.

I had no issue getting this to work when there is only one item in the list. However, when there are multiple items in the cart, the jQuery operates funky. It still does the fade in, but only when I hover over the last item in the cart, and of course all of the “remove X” images become visible. Argh…

So i searched around and think the .each() is my savior. I have been trying to get it to work, with no luck. My script just breaks when I attempt to implement it.

Anyone have any pointers on this *.each() thing and how to implement it into my script?*

I have tried putting a cartItem.each(function(){ around the mouseEnter/mouseLeave events (and used some $(this) selectors to make it “make sense”) and that didn’t do anything. Tried some other things as well with no luck…

I would normally make each remove button with it’s own id instead of using classes, then populate that value with the (i) from our ASP file, then duplicate the below for each one, but there has to be another way. That is unnecessary… isn’t it?

Here is the HTML (Sorry, there’s a lot):

<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>

And here is the 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);
        });

    });

});

If you didn’t see it, here is the “X” I am trying to fade…

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

Thanks for the help in advance. You guys always rock my world on here. I need ya (can’t go home til this is live… 🙁

Answer 1

This is where this/$(this) is very useful

$(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);
     });        
});