jquery中toggleclass的问题答案

【问题标题】：Issues with toggleclass in jqueryjquery中toggleclass的问题
【发布时间】：2013-04-08 18:18:37
【问题描述】：

我有一个条件，我必须使用切换类并在下拉菜单中删除所有其他列表的类，例如，如果我从列表中选择任何产品，则所有其他产品的背景位置都应为 0,0，点击再次选择相同的产品，免费位置应回到 0,0。类似于 toggle 的东西。我只是不能让这两个功能一起工作。关于如何使其工作或任何其他方式的任何想法都是我迄今为止尝试过的代码：

对于切换，我使用了以下 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>

【问题讨论】：

标签： c# jquery razor background-image background-position

【解决方案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");
     });

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

【讨论】：