Question

我目前正在尝试从用户使用$（＆＃39; .element＆＃39;）。attr选中元素复选框时创建的变量中添加多个类但这似乎不起作用far - 这个方法似乎只是获取数组中的第一个类，.addClass只能添加类而不能删除它们。

这有什么解决方法吗？

使用的代码是：

$('.ms-drop').on('change', function(){

        var val = [];

        var selectedItem  = $(this).find('input').attr('value');

        //get the values of each checked checkbox
        $(this).find('li > label > input:checked').each(function(i){
            val[i] = $(this).val();
        });

        var new_class = val.join(' ');

        console.log(new_class);

        $('.editable').attr('class', new_class);

        $('.writeHere').html(new_class);

});

请参阅以下链接以查看其有效：

JSBin

任何帮助将不胜感激！

Answer 1

通过removeAttr()删除所有现有课程，然后使用addClass()添加：

$('.editable').removeAttr('class');
$('.editable').addClass(new_class);

可以链接到：

$('.editable').removeAttr('class').addClass(new_class);

您的join代码似乎正常运行，理论上attr将替换这些类。我实际上怀疑你还有另外一个问题。

实际问题：您基本上是删除了用于匹配元素的类，您需要更改找到它们的方式，例如在该字段中添加id：

 <div id="myedit" class="editable">
    Class: <span class="writeHere">Hehe</span>
  </div>

并更改tyou从$('.editable')访问它的方式：

$('#myedit').addClass...

感谢所有选票，但我认为Rhumborl的方法对于指定的问题更清晰，更好。请upvote他：）

Answer 2

我会倾听input onchange而只是使用toggleClass：

$('.ms-drop input[type="checkbox"]').on('change', function(){
  $('.editable').toggleClass($(this).val());
  $('.editable').html($('.editable').attr('class')); // for debug purposes
});

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  <section class="ms-drop">
    <ul>
      <li>
        <label>
          <input type="checkbox" value="Class1">
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" value="Class2">
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" value="Class3">
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" value="Class4">
        </label>
      </li>
    </ul>
  </section>
  
  
  <div class="editable">
    Class: <span class="writeHere">Hehe</span>
  </div>
  
  
</body>
</html>

编辑如果其他代码可以更改@ {Roamer-1888提及的.editable样式，您可以测试该框的checked状态并决定添加或删除，而不仅仅是切换（尽管其他任何改变类的方法都会使复选框无法同步，这本身就是一个功能性错误）：

$('.ms-drop input[type="checkbox"]').on('change', function(){
  if($(this).is(':checked'))
    $('.editable').addClass($(this).val());
  else
    $('.editable').removeClass($(this).val());

  $('.editable').html($('.editable').attr('class')); // for debug purposes
});

使用.attr为元素添加多个类？

2 个答案: