Question

对于所有的jQuery大师，我可以使用你的帮助指出我可能是一个愚蠢的错误。当用户点击带有热点类的div时，我正在尝试交换类onclick。下面的代码在我第一次单击而不是第二次和随后的时间交换类。如果有更简洁的方法来实现这一点，请告诉我。

提前感谢您的专业知识。

jQuery的：

$('.hotspot').click(function() {
    if($(this).parent().attr("class") == 'checked'){
        $(this).parent().removeClass('checked').addClass('unchecked');  
    }
    if($(this).parent().attr("class") == 'unchecked'){
        $(this).parent().removeClass('unchecked').addClass('checked');  
    } 
});

标记：

<ul id="prettyCheck">
    <li class="checked">
          <div class="hotspot"></div>
          <div class="desc"><div class="descPad">Some text</div></div>
    </li>
    <li class="unchecked">
          <div class="hotspot"></div>
          <div class="desc"><div class="descPad">Some text</div></div>
    </li>
</ul>

Answer 1

你试过没有改变吗？

$('.hotspot').click(function() {
  if($(this).parent().attr("class") == 'checked'){
      $(this).parent().removeClass('checked');
      $(this).parent().addClass('unchecked');
  }
  if($(this).parent().attr("class") == 'unchecked'){
      $(this).parent().removeClass('unchecked');
      $(this).parent().addClass('checked');  
  } 
});

Answer 2

试试这个

$('.hotspot').toggle(function() {
      $(this).parent().removeClass('checked');
      $(this).parent().addClass('unchecked');
      // do more here...
  }, 
  function(){
      $(this).parent().removeClass('unchecked');
      $(this).parent().addClass('checked');  
      // do more here...
});

或

$('.hotspot').click(function() { $(this).parent().toggleClass('checked'); $('checkbox selector').attr('checked', $(this).parent().hasClass('checked')); // do more here... });

Answer 3

我认为问题是如果已经检查了类，那么第一个if语句将取消选中它，然后下一个if将重新检查它。尝试将第二个if更改为else if，看看是否能为您修复此问题。我这样做了，并且用.attr('class') == 'checked'代替.hasClass('checked')做了sberry2A的建议，这对我有用。

编辑：至于为什么你只能用原始代码切换每个元素一次，这是因为.hasClass('checked')的测试只有在类名被“检查”时才会成立“（同样适用于.hasClass('unchecked')和类名”未选中“）。 jQuery的addClass()函数在你给它的类前面添加一个空格，这样如果你告诉它添加“已检查”类，它会将字符串“checked”添加到类名。因此，以类名“checked”开头的元素将被修改为具有类名“unchecked”，并且将不再匹配任何if语句，从而阻止它再次切换。这就是为什么sberry2A建议使用hasClass()，因为如果元素的classname包含你传递它的类，它将返回true，即使在类名中有额外的空格或其他类。

Answer 4

知道了！除了Reigels代码，我还可以为每个热点添加ID，并将其用于其他onclick函数以执行我需要的任何操作。

感谢您的帮助！

更改jQuery中的类仅在我第一次单击时才有效

4 个答案: