1

因此，如果您单击 Red 类，它应该从 Blue 和 Green 按钮中删除 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>
4

3 回答 3

5 
$(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
于 2013-06-17T19:11:38.860 回答
1

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

有了这个，您不需要为每个 id 单独创建一个点击处理程序，并且可能您可以使用冗余代码摆脱基于每个 id 的 ids 和多个处理程序。

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

小提琴

正如其他人提到的，如果你只使用一个类作为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;
}

小提琴

于 2013-06-17T19:19:38.700 回答
1

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

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 作为颜色，只需添加一个 data-color 属性，然后进行 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>
于 2013-06-17T19:22:11.333 回答