更改相同ID的Css类，它是html页面中具有相同名称的多个Id

Question

我想更改同一个id的css类，它在页面中出现多个。我尝试但是当有2个同名的id时，只反映第一个id而不是其他。

我尝试：

查看页面： <i id="{{obj.id}}"></i>

控制器

$(getJson.Id).removeClass('busy b-white bottom');

$(getJson.Id).addClass('on b-white bottom');

所以，我怎么能实现这个目标呢？

Answer 1

►首先，Id必须是唯一的。

如果您使用同名的Id，请尝试使用class而不是。

您的解决方案将类似于

$('[id='+getJson.Id+']').removeClass('busy b-white bottom').addClass('on b-white bottom');

这是一个选择具有相同id的所有元素的简单方法。

＆＃13;

＆＃13;

$('[id=test]').removeClass('yellow').addClass('red')

＆＃13;

.yellow{
  background-color:yellow;
}
.red{
  background-color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="test" class="yellow">q</p>
<p id="test" class="yellow">w</p>
<p id="test" class="yellow">e</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如上所述 ID应始终是唯一的，但如果您不想接受建议，则可以使用属性选择器选择所有匹配的ID（不建议用作ID必须是唯一的）：

$('[id='+getJson.Id+']').removeClass('busy b-white bottom');
$('[id='+getJson.Id+']').addClass('on b-white bottom');