3

背景色が青の 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があります

4

5 に答える 5

4

このjsFiddle の例を試してください。

$('.block').click(function() {
    $('.block').removeClass('selectable');
    $(this).addClass('selectable');
});​
于 2012-11-04T19:03:16.383 に答える
3

要素が兄弟である場合は、 siblingsメソッドを使用できます。

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

または：

var $blocks = $(".block").on("click", function() {
    $blocks.removeClass("selectable");
    $(this).addClass("selectable");
});
于 2012-11-04T19:01:42.750 に答える
1

これはうまくいくはずです：

$('.block').click(function() {
    $('.selected').removeClass('selected')
    $(this).addClass('selected');
});
于 2012-11-04T19:04:08.363 に答える
1

私のアプローチは、クリック時に他のすべてのdivの選択を解除してから、クリックされたものを切り替えます(同様に選択解除できるようにするため):

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

フィドルを更新しました。

于 2012-11-04T19:04:20.523 に答える
-1

このためのコードは非常に単純です。

$('.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.
});
于 2012-11-04T18:59:49.397 に答える