Как бы вы использовали jQuery .each() для применения одного и того же скрипта к каждому элементу с одним и тем же классом?

У меня есть с несколькими перечисленными элементами корзины. У меня есть кнопка удаления «Лого Людей Икс», которую я хочу отображать рядом с элементом, когда покупатель наводит курсор на элемент корзины.

У меня не было проблем с тем, чтобы заставить это работать, когда в списке есть только один элемент. Однако, когда в корзине несколько товаров, jQuery работает странно. Он по-прежнему исчезает, но только когда я навожу курсор на последний элемент в корзине, и, конечно, все изображения «удалить X» становятся видимыми. Арх...

Поэтому я поискал и думаю, что .each() — мой спаситель. Я пытался заставить его работать, но безуспешно. Мой сценарий просто ломается, когда я пытаюсь его реализовать.

Кто-нибудь может подсказать, что такое *.each() и как реализовать его в моем скрипте?*

Я попытался поместить cartItem.each(function(){ вокруг событий mouseEnter/mouseLeave (и использовал некоторые селекторы $(this), чтобы сделать это «имеющим смысл»), и это ничего не дало. Пробовал и другие вещи, но безрезультатно...

Обычно я делаю каждую кнопку удаления со своим собственным идентификатором вместо использования классов, затем заполняю это значение (i) из нашего файла ASP, а затем дублирую приведенное ниже для каждого, но должен быть другой способ. Это ненужно... не так ли?

Вот 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);
        });

    });

});

Если вы не видели, вот буква "Х", которую я пытаюсь стереть...

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

Спасибо за помощь заранее. Вы, ребята, всегда сотрясаете мой мир здесь. Ты мне нужен (не могу вернуться домой, пока это не будет в прямом эфире... :(


jquery each
person derekmx271    schedule 07.09.2012    source источник
comment
Я, наверное, мог бы использовать .hover вместо mouseEnter/mouseLeave... О боже, я стар.   -  person derekmx271    schedule 07.09.2012

Ответы (2)


arrow_upward
1
arrow_downward

Вот где 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);
     });        
});
person wirey00    schedule 07.09.2012
comment
Держу пари, вы оба правы. У меня есть схематичный css, который отображает второй ‹li› поверх первого. lol Это может объяснить, почему исчезает только второй. Я попробую это снова, когда исправлю CSS. Спасибо за быстрый ответ :) - person derekmx271; 07.09.2012
comment
Да, мне не хватало четких: оба div после поплавков... Так что это работает! Большое спасибо!!! - person derekmx271; 07.09.2012

arrow_upward
0
arrow_downward

У вас есть несколько элементов 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);
    });
});
person tsukimi    schedule 07.09.2012
comment
Только что реализовал эту строку, и последний элемент работает правильно, но первый остается с непрозрачностью 0%... - person derekmx271; 07.09.2012
comment
Также спасибо за вашу помощь @tsukimi :) Я попробовал ваш отредактированный пост, и он заставил оба исчезнуть, но не тогда, когда вы наводили курсор на отдельные элементы корзины. Но после помощи ваших ребят я вижу, как это работает. Спасибо чувак... - person derekmx271; 07.09.2012