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

Question

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

我在 1 个名为 main_btns 的数组中有 4 个 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>

Answer 1

使用了一些 jQuery。

Fiddle .

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');
}