jquery - 使用 Jquery 进行简单选择

Question

我只有 3 个背景颜色为蓝色的 div。

我需要 jQuery 来使每个框都可选择。
当单击/选择框时，jQuery 应该将具有不同背景颜色的类 .selected 添加到红色。单击另一个 div 时，所有其他未选择的应变回蓝色。

这是CSS

.block {
    width: 300px;
    padding: 10px;
    background: blue;
    color:white;
    margin-top:5px;
}

.selectable {
    background: red;
}

这是html

<div class="block">
    Some stuff here
</div>

<div class="block">
    Some stuff here
</div>

<div class="block">
    Some stuff here
</div>

​我如何用 jQuery 做到这一点？
这是所有实际的jsfiddle

Answer 1

试试这个jsFiddle 示例。

$('.block').click(function() {
    $('.block').removeClass('selectable');
    $(this).addClass('selectable');
});​

Answer 2

如果元素是兄弟元素，则可以使用兄弟姐妹方法：

$(".block").on("click", function() {
    $(this).addClass("selectable").siblings().removeClass("selectable");
});

或者：

var $blocks = $(".block").on("click", function() {
    $blocks.removeClass("selectable");
    $(this).addClass("selectable");
});

Answer 3

这应该有效：

$('.block').click(function() {
    $('.selected').removeClass('selected')
    $(this).addClass('selected');
});

Answer 4

我的方法是在单击时取消选择所有其他 div，然后切换单击的 div（也允许取消选择）：

​$('.block').click(function() {
    $('.block').not($(this)).removeClass('selectable');
    $(this).toggleClass('selectable');
});​​​​​

更新了 FIDDLE。

Answer 5

代码非常简单。

$('.block').click(function() {
  $(this).toggleClass('selected'); // if it has the class, it will take it away, if it doesn't have it, it will add it.
});