2013-04-08 58 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"); 
    }); 

这应该解决您的问题。可以在一个点击事件函数中调用两个逻辑。 :-)