我有10个不同的按钮，每个按钮都有一个通用类和一个唯一类。
<button type="button" class="topic btn1" data-target="desc1">Safety</button>
<button type="button" class="topic btn2" data-target="desc2">Environment</button>
<button type="button" class="topic btn3" data-target="desc3">Climate change</button>
<button type="button" class="topic btn4" data-target="desc4">Sustainability</button>
<button type="button" class="topic btn5" data-target="desc5">Business strategy</button>
<button type="button" class="topic btn6" data-target="desc6">Performance data</button>
<button type="button" class="topic btn7" data-target="desc7">Working for Shell</button>
<button type="button" class="topic btn8" data-target="desc8">Working together</button>
<button type="button" class="topic btn9" data-target="desc9">Social performance</button>
<button type="button" class="topic btn10" data-target="desc10">Human rights</button>
一个函数被应用于它将为每个按钮添加一个额外的唯一类。
for (let i = 0; i <= 12; i++) {
$( ".btn" + i ).click(function() {
$( this ).toggleClass( "act-btn" + i );
});
}
现在我要创建两个按钮:-
act-btn1到act-btn10将以相同的顺序添加。
null
$('.add').click(function() {
for (let i = 1; i <= 10; i++) {
$('.btn' + i).addClass( "act-btn" + i);
}
});
$('.remove').click(function() {
for (let i = 1; i <= 10; i++) {
$('.btn' + i).removeClass( "act-btn" + i);
}
});<button class="add">Add class</button>
<button class="remove">remove class</button>