Question

当我尝试使用jQuery在html标签中添加id或class等属性时，那么属性的旧值就会丢失。

以下是一个例子：

<div id="dom">
    <h1 class="class">I am heading 1</h1>
    <h1 class="class">I am heading 2</h1>
    <h1 class="class">I am heading 3</h1>
    <h1 class="class">I am heading 4</h1>
    <h1 class="class">I am heading 5</h1>
    <h1 class="class">I am heading 6</h1>
</div>

现在我试图通过jquery添加另一个类，它有一个名为'class'的类。

<script>
    $(document).ready(function(){
        $('.class').attr('class','newClass')
    })
</script>

结果它删除了旧类并设置了新类。但我想要两个班级。围绕这个问题的好方法是什么？

Answer 1

.attr()用于获取/设置新值。在设置条件的情况下，与属性关联的先前值将被新的完全覆盖。

您应该使用.addClass()添加更多类：

$('.class').addClass('newClass');

要添加多个类，请使用.addClass()参数中的空格分隔多个类：

 $('.class').addClass('newClass newclass2');

Answer 2

<强>问题：

当您使用attr()时，jQuery会将class属性值设置为newClass，从而替换所有以前的类。

为匹配元素集设置一个或多个属性。

<强>解决方案：

使用addClass()向元素添加新类。

将指定的类添加到匹配元素集中的每个元素。

$('.class').addClass('newClass');

正如我所看到的，在你的情况下，没有必要使用jQuery在页面加载上添加类。您可以在HTML中执行此操作。

<强>演示

＆＃13;

$('.class').on('click', function() {
  $(this).addClass('newClass');
});

＆＃13;

.class {
  color: red;
}
.newClass {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="dom">
  <h1 class="class">I am heading 1</h1>
  <h1 class="class">I am heading 2</h1>
  <h1 class="class">I am heading 3</h1>
  <h1 class="class">I am heading 4</h1>
  <h1 class="class">I am heading 5</h1>
  <h1 class="class">I am heading 6</h1>
</div>

＆＃13;

Answer 3

只需使用addClass（）：

$('.class').addClass('class-name');

Answer 4

当您使用attr（）函数时，它将替换为current属性。您将使用jquery addClass（）方法。它对你有帮助。

$('.class').addClass('newClass')

jQuery中的attr（）方法问题

4 个答案: