0

私は複数のカートアイテムがリストされています。顧客がカートアイテムにカーソルを合わせたときにアイテムの横にフェードインしたい「x-menロゴ」のような削除ボタンがあります。

リストにアイテムが1つしかない場合でも、これを機能させるのに問題はありませんでした。ただし、カートに複数のアイテムがある場合、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 に答える