0

I have a condition , where i have to use toggle class plus delete the class of all other list in a drop down menu , for instance if i select any product from the list , all the other products background position should be 0,0 , also on clicking the same selected product again the bacground position should go back to 0,0. something similar to toggle . I just cant get the both functionality work together. any ideas on how to get it working or any other way of doing it below is the code which i have tried so far:

for toggle i used the following jquery code :

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

To change the background position of all the other list labels apart from the selected ones

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