0

トグル クラスを使用し、ドロップダウン メニューで他のすべてのリストのクラスを削除する必要がある条件があります。たとえば、リストから製品を選択した場合、他のすべての製品の背景位置も 0,0 にする必要があります選択した同じ製品をもう一度クリックすると、背景の位置は 0,0 に戻ります。トグルに似たもの。両方の機能を連携させることができません。それを機能させる方法または以下の他の方法に関するアイデアは、私がこれまでに試したコードです:

トグルの場合、次のjqueryコードを使用しました:

<script type="text/javascript">
     $(document).ready(function() {
         $('.option-list.swatch.brass label').on("click", function() {
            $(this).toggleClass('not-selected selected-value');
         });       
     });
 </script>

選択したラベル以外のすべてのリスト ラベルの背景位置を変更するには

<script type="text/javascript">
     $(document).ready(function() {
         $('.option-list.swatch.brass label').on("click", function() {
             $(".option-list.swatch.brass label").each(function() {
                 $(this).css("background-position", "0px 0px");
             });

             $(this).css("background-position", "0px 50px");
         });       
     });
</script>

<ul>
@foreach (var pvaValue in attribute.Values)
                { 
         <li>

          <label for="" class="not-selected" style="background-image:url(@(pvaValue.MenuIcon));width:50px;height:49px;">@pvaValue.Name</label>

                   }
                         </li> </ul>
<style type="text/css">
    label.not-selected{background-position:0px 0px;}
    label.selected-value{background-position:0px 50px;}

</style>
4

1 に答える 1

1

Javascript の競合が原因で発生しています。以前に呼び出されたものは、後でクリック バインドされた関数によってオーバーライドされます。

私は、両方のクリック境界からのロジックを組み合わせると言います..

     $('.option-list.swatch.brass label').on("click", function() {
         //FIRST LOGIC
         $(this).toggleClass('not-selected selected-value');
         //SECOND LOGIC
         $(".option-list.swatch.brass label").each(function() {
             $(this).css("background-position", "0px 0px");
         });

         $(this).css("background-position", "0px 50px");
     });

これで問題が解決するはずです。ワンクリック イベント関数で両方のロジックを呼び出しても問題ありません。:-)

于 2013-04-08T18:41:39.577 に答える