Question

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

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

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

当用户在每个数组中的按钮之间单击时，我需要将类从一个数组移到另一个数组中。例如：如果我单击genre_btns数组中的一个按钮，那么按钮的背景颜色将会改变，但是如果我单击main_btns数组中的一个按钮，那么在genre_btns数组中单击的按钮的背景颜色将恢复在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');
}

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

1 个答案: