Question

我们编写了一个自定义的“展开/折叠”功能来展开和折叠HTML行。为了识别扩展的行，我们添加了一个类 - “扩展”到扩展元素（没有这个类的行被识别为折叠的那些。）

在页面加载时，一组行被添加到HTML表中，我们的脚本运行以将必要的元素标记为“展开/折叠”并添加必要的onClick函数。这个位工作正常，我们可以根据需要展开和折叠行。

<tr id="abc" data-dtoggle="collapse" data-dheader="true" data-dparent="tblXyz" class="expanded">
    <td>..</td>
    ..
</tr>

单击页面中的按钮后，将添加一组新行，替换现有行。我们的脚本再次运行以标记“展开/折叠”行并添加onClick功能。但是这一次，虽然函数是根据需要添加的，但是类名不会在需要的地方添加，而只是添加属性名称“class”而没有值“expand”。

我们尝试将addClass("expanded")方法替换为addAttr("class", "expanded")，但结果相同。

<tr id="abc" data-dtoggle="collapse" data-dheader="true" data-dparent="tblXyz" class>
    <td>..</td>
    ..
</tr>

如果您需要我们的代码中的代码段，请告诉我们。

在这方面的任何帮助将不胜感激。

Answer 1

realloc将完美运行，请找到下面附带的代码段。

addClass请从您的脑海中删除此语法

只是addAttr。

attr

基本区别在于$('#abc').attr("Class",",another_class");会追加这些类，而addClass将替换整个属性。

例如

attr

执行这两行代码后1.$('#abc').attr("Class","firstClass"); 2.$('#abc').attr("Class","secondClass");就像这样

#abc

但是在addClass的情况下，它有所不同

After line-1.
<tr id="abc" class="firstClass">
 After line-2.
<tr id="abc" class="secondClass">

执行这两行代码后$('#abc').addClass("firstClass"); $('#abc').addClass("secondClass");就像这样

#abc

希望它可以帮到你!!

＆＃13;

After line-1.
    <tr id="abc" class="firstClass">
After line-2.
    <tr id="abc" class="firstClass secondClass">

＆＃13;

$('#abc').attr("Class",",another_class");
$('#abc').addClass('expanded');
setTimeout(function(){
alert($('#abc').attr('class'));
 },500);

＆＃13;

Answer 2

要添加/删除课程，请使用classList.add()和classList.remove()。

与document.getElementById('abc').classList.add('newclass')

一样

如果您想更轻松地打开和关闭课程，也可以使用classList.toggle()。

通过尝试手动设置类，如果您有多个类并且只想添加或删除其中一个类，则会遇到困难。