Question

因此，如果您单击Red类，它应该从蓝色和绿色按钮中删除blue_on和green_on类（如果它们正在使用）。

<div id="dashboard-menu">
    <div id="red" class="red_on">Red</div>
    <div id="blue" class="blue_off">Blue</div>
    <div id="green" class="green_off">Green</div>
</div>

我的codepen，我试图在较小的区域复制我的问题： http://codepen.io/leongaban/pen/vzolu

我的真实参考代码

<div id="dashboard-menu">
    <div id="dash-btn" class="dashboard-button-on">
        <div class="icon"></div>
        <span>Dashboard</span>
    </div>

    <div id="dash-btn" class="affiliate-button-off">
    <span>Affiliate Search</span>
    </div>

    <div id="dash-btn" class="wishlist-button-off">
    <div class="icon"></div>
    <div class="count">3</div>
    </div>
</div>

Answer 1

$(this).siblings().removeClass('blue_on green_on');

http://api.jquery.com/removeClass

但是，根据您要完成的任务，更好的方法可能是利用多个（空格分隔的）类：

<div id="dashboard-menu">
    <div class="red on">Red</div>
    <div class="blue">Blue</div>
    <div class="green">Green</div>
</div>

JS：

$(this).addClass('on').siblings().removeClass('on'); // radio-button behavior

Answer 2

你可以像这样写一些通用的东西：

有了这个，你不需要为每个id单独创建一个click处理程序，可能你可以根据每个带有冗余代码的id去除id和多个处理程序。

    var dash = {
    menu_red: true,
    menu_blue: false,
    menu_green: false
};


$(document).ready(function () {
    // Main function
    $(function () {
        $('#dashboard-menu > div').on('click', function () {
            $(this).removeClass(this.id + "_off").addClass(this.id + "_on"); // For the clicked item remove the off class and add the on class
            dash["menu_" + this.id] = true; // set the property to true.
            $(this).siblings().removeClass(function () { //use remove class on siblings
                dash["menu_" + this.id] = false; //set the property to false
                return this.id + "_on"; //get the on class to be removed
            }).addClass(function () {

                return this.id + "_off"; //get the offclass to be removed
            });
           console.log(dash)
        });
    });
});

Fiddle

正如其他人提到的，如果你只使用一个类on状态，你可以简化很多这样的事情：

$(document).ready(function () {
    // Main function
    $(function () {
        $('#dashboard-menu > div').on('click', function () {
            $(this).addClass("on");

            dash["menu_" + this.id] = true;

            $(this).siblings('.on').removeClass(function () {
                dash["menu_" + this.id] = false;
                return "on";
            });

           console.log(dash)
        });
    });
});

并安排你的css：

.red, .blue, .green {
    color: #ccc;
    background: #666;
}
.red.on {
    background: red;
}
.blue.on {
    background: blue;
}
.green.on {
    background: green;
}

Fiddle

Answer 3

我大大简化了你的代码笔....

http://codepen.io/anon/pen/yaJxD

继承你完整的javascript，而不是那些if / then语句......

  $('.but').click(function() {
    var color = $(this).attr('id');
    $('.but').css('background','#666');
    $(this).css('background',color);
  });

只需将你的html更改为....因为你已经将id作为颜色....如果你不会将id作为颜色，只需添加数据颜色属性，然后更改而是var color = $(this).data('color')

<div id="dashboard-menu">
 <div id="red" class="but on">Red</div>
 <div id="blue" class="but off">Blue</div>
 <div id="green" class="but off">Green</div>
</div>

如何从兄弟元素中定位和删除类？

3 个答案:

Fiddle

Fiddle