Question

我正在使用几个锚点，当点击一个锚点时，该类切换到 img-swap on 如果我点击另一个锚点，那个锚点的类也会在 on 上切换我想要实现的目标：如果1个锚点已经上的类，则必须阻止所有其他锚点才能打开 on

jQuery(document).ready(function ($) {
 $('a.img-swap').click(function () {
  $(this).toggleClass('on');
 }); 
});

当一个班级在上时，是否可以在javascript中进行检查？如果是，则阻止其他锚点从班级切换？

Answer 1

~~我只会将处理程序绑定为只触发一次：~~

127.0.0.1:8088/client2.html

<击> 现在，如果您希望状态jQuery(document).ready(function ($) { $('a.img-swap').one('click', function () { $(this).toggleClass('on'); }); });可以切换，我会改为使用：

on

Answer 2

试试这个 -

$(document).ready(function() {
  $("a.img-swap").click(function() {
    $("a.img-swap").each(function() {
      if ($(this).hasClass("on")) $(this).removeClass("on");
    });
    $(this).addClass("on");
  });
});

.on {
  background: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a class="img-swap on"> Img1 </a>

<a class="img-swap"> Img1 </a>

<a class="img-swap"> Img1 </a>

<a class="img-swap"> Img1 </a>

Answer 3

使用hasClass检查元素是否有类。

jQuery(document).ready(function ($) {
    $('a.img-swap').click(function () {
        if(!$("a.img-swap").hasClass("on"))
            $(this).toggleClass('on');
    });
});

Answer 4

$(document).ready(function () {
     $('a.img-swap').click(function () {
       if($(".on").length > 0 ){
           console.log("Found");
       }else{
       console.log("not  found");
         $(this).addClass('on')
       }
       
     }); 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='img-swap'>abcd1</a>
<a class='img-swap'>abcd2</a>
<a class='img-swap'>abcd3</a>
<a class='img-swap'>abcd4</a>
<a class='img-swap'>abcd5</a>
<a class='img-swap'>abcd6</a>

当classe打开时如何阻止切换类

4 个答案: