Issues with toggleclass in jquery

Question

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>

score 1 · Answer 1 · answered Apr 08 '13 at 18:41

It is occurring because of Javascript conflict. The one which is called earlier will be overridden by later click bound function..

I would say, combine the logic from both the click bounds..

     $('.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");
     });

This should solve your problem. It's okay to call both the logic in one click event function. :-)

Issues with toggleclass in jquery

1 Answers1