2013-04-08 99 views
0

我有一個條件,在那裏我必須使用切換類別,並在下拉菜單中刪除所有其他列表的類別,例如,如果我從列表中選擇任何產品,所有其他產品背景位置應爲0,0,再點擊 同樣選定的產品,免費位置應該回到0,0。類似於切換的內容。我不能讓這兩種功能一起工作。 上的任何想法如何得到它的工作或做任何其他方式在它下面是我迄今爲止嘗試過的代碼:jquery中的toggleclass的問題

爲撥動我用下面的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> 

回答

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"); 
    }); 

這應該解決您的問題。可以在一個點擊事件函數中調用兩個邏輯。 :-)