Question

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

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

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

这应该可以解决您的问题。可以在一次单击事件功能中调用两个逻辑。： - ）

jquery中toggleclass的问题

1 个答案: