使用 Jquery 进行简单选择答案

【问题标题】：Simple Selectable with Jquery使用 Jquery 进行简单选择
【发布时间】：2012-11-05 11:05:16
【问题描述】：

我只有 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

【问题讨论】：

标签： jquery css

【解决方案1】：

试试这个jsFiddle example。

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

【讨论】：

转念一想，这个是为我做的！惊人的！谢谢！

【解决方案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");
});

【讨论】：

现在这很有趣。李的兄弟姐妹？
@wolverene 我不明白你的问题是什么 - 你能解释一下吗？ (Now this is interesting. siblings of a li?)
@NULL 对不起，请忽略这个问题。因为我仍然需要完全理解兄弟姐妹方法是什么。还在学习东西。但是现在我开始看到 jquery 是多么的神奇，它的潜力是无限的。我从这篇文章中学到了很多！谢谢！

【解决方案3】：

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

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

更新FIDDLE。

【讨论】：

【解决方案4】：

这应该可行：

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

【讨论】：

【解决方案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.
});

【讨论】：

-1 过于简单化.. 不会按照 OP 的要求更改其他 div