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 example 。

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

Answer 2

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

$(".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.
});

使用Jquery可以简单地选择

5 个答案: