0

2つの質問...

クリックされたDIVの色を変更し、他のものをデフォルトにリセットするためのコードを含むDIVSのセットがあります。これはうまく機能します...しかし、背景色はJavaScriptコード内で指定されています。CSS クラスを使用しようとすると、正常に動作しませんでした。この 2 番目のバージョンを機能させて、JavaScript ではなく CSS クラスを使用して色を指定するにはどうすればよいですか。

私の2番目の質問は、

.parent()

コードの一部であり、このコンテキストで実際に何をするのでしょうか?

どんな助けでも大歓迎です。

4

9 に答える 9

4

これを試して：

$('#container').on('click', 'div.button', function(){
    $(this).addClass('on').siblings('.button').removeClass('on');
});
​

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

いくつかのポイント:

1) 同じイベント コールバックを複数のイベントにバインドするときはいつでも、イベントをデリゲートすることをお勧めします。そのため、イベントを各要素に繰り返しアタッチするのではなく、親コンテナーに委任します。これが初めての場合は、イベントの委任を調べてください。

2) 元のコードでは、parent()呼び出しは基本的に兄弟に影響を与えるために、ツリーを上ってから戻る手段でした。これを単にsiblings()代わりに使用するように変更しました。

3) 明示的な「オフ」状態にする代わりに、オフ状態をデフォルトにします。次に、オン状態をオン/オフするだけです（.on）

于 2012-08-21T12:26:03.500 に答える
3

これを試して：

http://jsfiddle.net/HNXjQ/4/

HTML:

<div id="container">
    <div class="button on">1</div>
    <div class="button off">1</div>
    <div class="button off">1</div>
    <div class="button off">1</div>
</div>

CSS:

#container {
    position: absolute;
    top: 0;
    left: 0;
}
.button {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px;
    border: 1px solid #333;
    background: green;
}
.on {
    background: red;
}

JS:

$('.button').click(function(){
    $(this).siblings().removeClass('on');
    $(this).addClass('on');
});
  1. この効果を得るために「オフ」クラスは必要ありません。
  2. また、この場合、「.parent().find()」よりも兄弟を探す「.siblings()」を使用する方が適切です。（基本的には高速・高精度）
于 2012-08-21T12:25:47.220 に答える
2

.parent は、参照している jQuery オブジェクトの親要素を選択します。この場合は「#container」になります。

したがって、「$(this).parent().find('.button')」は、「#container」要素内のすべての「.button」要素、つまりすべてのボタンを返します。

したがって、JavaScript は期待どおりに機能しません。次のことを試してください。 

$('.button').click(function(e){
    $('.on').addClass('off'); // add '.off' to the one element that is '.on' 
    $('.on').removeClass('on'); // remove '.on' from this same element
    $(e.target).addClass('on'); // add '.on' to the element clicked
    $(e.target).removeClass('off'); //remove '.off' from that element clicked
    currentSelected = this;
});

ここでは、'click' 関数にパラメーターとして 'e' を追加します。次に、「e.target」を使用して、クリックされた要素を取得します。また、n 要素に '.on' と '.off' の両方が同時に接続されていないことを確認し、スタイルが互いにオーバーライドされないようにします。

于 2012-08-21T12:52:27.440 に答える
1

または非常に単純です：

http://jsfiddle.net/HNXjQ/14/

$('.button').click(function(){
    $(this).addClass('on').siblings().removeClass('on');
});

</ p>

于 2012-08-21T12:45:01.750 に答える
1

新しいクラスを設定し、jQuery を使用.toggleClassしてそれらを切り替えることができます。

http://jsfiddle.net/Kyle_Sevenoaks/HNXjQ/5/

于 2012-08-21T12:26:18.887 に答える
1

JavaScript コードを次のように変更できます。

$('.button').click(function(){
    $(this).parent().find('.button').addClass('off');
    $(this).removeClass('off').addClass('on');
});
​

それは速くて汚いですが、うまくいきます

于 2012-08-21T12:24:50.413 に答える
1 
$('.button').click(function(){
    $(this).parent().find('.button.on').removeClass('on').addClass('off');
    $(this).removeClass('off').addClass('on');
});
​
于 2012-08-21T12:25:24.493 に答える
1

仕事中、説明する時間がありません。これをチェックしてください。

http://jsfiddle.net/HNXjQ/12/

よかったら後で説明します！

于 2012-08-21T12:29:05.483 に答える
0

CSS の特性上、off クラスが上書きされていたので、他の人が言っているように、最初に on クラスを削除する必要があります。また、およびクラスの css のbackground代わりに使用するつもりでしたか?background-coloroffon

于 2012-08-21T12:27:13.447 に答える