jquery의 토글 클래스 문제

Question

나는 토글 클래스를 사용하여 드롭 다운 메뉴의 다른 모든 클래스의 클래스를 삭제해야하는 조건이 있습니다. 예를 들어 목록에서 제품을 선택하면 다른 모든 제품 배경 위치가 0,0이어야합니다. 동일한 선택한 제품을 다시 클릭해도 배경이 0,0으로 돌아갑니다. 토글과 비슷한 것. 두 기능이 함께 작동하지 않습니다. 에 어떤 아이디어가 어떻게 작동 얻을하거나 일을 다른 방법은 아래 내가 지금까지 시도하는 코드입니다 :

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

가를 변경하려면 : 나는 다음과 같은 jQuery 코드를 사용 토글을위한

선택한 목록을 제외한 다른 모든 목록 레이블의 배경 위치

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

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

.. 나중에 바인딩을 클릭 기능에 의해 무시됩니다. 하나의 클릭 이벤트 함수에서 두 로직을 모두 호출해도됩니다. :-)