使用 2 个不同的函数删除 2 个按钮数组中包含的按钮上的 css 类

Removing a css class on buttons contained in 2 button arrays using 2 different functions

本文关键字：按钮 包含 css 删除 函数 使用 数组      更新时间：2023-09-26

不太确定这是否是一个范围问题，但基本上...

我在 4 个名为 main_btns 的数组中有 1 个div 按钮，当您在每个按钮之间单击时，它们会在 2 个类之间切换以通过切换显示不同的背景颜色。

我在另一个名为 genre_btns 的数组中还有 12 个按钮，当以相同的背景颜色变化切换时，它们会在其他 2 个类之间切换。

当我的用户在每个数组中的按钮之间单击时，我需要将类从一个数组删除到另一个数组。例如：如果我单击 genre_btns 数组中的一个按钮，那么按钮的背景颜色会改变，但是如果我单击 main_btns 数组中的一个按钮，那么在 genre_btns 数组中单击的按钮的背景颜色将恢复 BACK，而main_btns中单击的按钮将更改。（总的来说，在每个数组之间切换按钮时，我只需要显示一种背景颜色）。

这是我的代码： 

<!-- array for main_btns -->
<div id="selector">
    <div id="btn-atoz" class="class2" onclick="toggleClassMainBtn(this)">
        ACTS A-Z
    </div>
    <div id="btn-headlining" class="class1" onclick="toggleClassMainBtn(this)">
        HEADLINING
    </div>
    <div id="btn-weekend1" class="class1" onclick="toggleClassMainBtn(this)">
        WEEKEND 1
    </div>
    <div id="btn-weekend2" class="class1" onclick="toggleClassMainBtn(this)">
        WEEKEND 2
    </div>
</div>
<!-- array for genre_btns -->
<div id="genre">
    <div id="btn-alternative" class="class3" onclick="toggleClassGenreBtn(this)">
      ALTERNATIVE
    </div>
    <div id="btn-blues" class="class3" onclick="toggleClassGenreBtn(this)">
      BLUES 
    </div>
    <div id="btn-country" class="class3" onclick="toggleClassGenreBtn(this)">
      COUNTRY
    </div>
    <div id="btn-dance" class="class3" onclick="toggleClassGenreBtn(this)">
      DANCE
    </div>
    <div id="btn-electronic" class="class3" onclick="toggleClassGenreBtn(this)">
      ELECTRONIC
    </div>
    <div id="btn-hip-hop-rap" class="class3" onclick="toggleClassGenreBtn(this)">
      HIP-HOP&#47;RAP
    </div>
    <div id="btn-jazz" class="class3" onclick="toggleClassGenreBtn(this)">
      JAZZ
    </div>
    <div id="btn-metal" class="class3" onclick="toggleClassGenreBtn(this)">
      METAL
    </div>
    <div id="btn-pop" class="class3" onclick="toggleClassGenreBtn(this)">
      POP
    </div>
    <div id="btn-rnb" class="class3" onclick="toggleClassGenreBtn(this)">
      R&amp;B
    </div>
    <div id="btn-reggae" class="class3" onclick="toggleClassGenreBtn(this)">
      REGGAE
    </div>
    <div id="btn-rock" class="class3" onclick="toggleClassGenreBtn(this)">
      ROCK
    </div>
</div>
<!-- css for button backgrounds -->
<style>
.class1 /* button toggles */
{
    background: #cc516d;
}
.class2 /* button toggles */
{
    background: #963B50;
}
.class3 /* button toggles */
{
    background: #cc516d;
}
.class4 /* button toggles */
{
    background: #963B50;
}
</style>

<script>
//toggles for buttons acts a-z, headlining, weekend 1, weekend 2
function toggleClassMainBtn(x){
    var main_btns = document.getElementById('selector').children;
    for(var i = 0; i < main_btns.length; i++){
        main_btns[i].className = "class1";
    }
    x.className = "class2";
}
//toggles for genre buttons 
function toggleClassGenreBtn(x) {
    var genre_btns = document.getElementById('genre').children;
    for(var i = 0; i < genre_btns.length; i++){
        genre_btns[i].className = "class3";
    }
    x.className = "class4";
}
</script>

使用了一些 jQuery。

小提琴。

.js：

function toggleClassMainBtn(x){
    var main_btns = document.getElementById('selector').children;
    for(var i = 0; i < main_btns.length; i++){
        main_btns[i].className = "class1";
    }
    x.className = "class2";
    $('.class4').removeClass('class4').addClass('class3');
}
//toggles for genre buttons 
function toggleClassGenreBtn(x) {
    var genre_btns = document.getElementById('genre').children;
    for(var i = 0; i < genre_btns.length; i++){
        genre_btns[i].className = "class3";
    }
    x.className = "class4";
    $('.class2').removeClass('class2').addClass('class1');
}
相关文章：