2

こんにちは私が単純化しようとしているコードは次のとおりです。

  $(document).ready(function(){
    $('.selection0').click(function() {
        $('.selection0').css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });
    $('.selection1').click(function() {
        $('.selection1').css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });
    $('.selection2').click(function() {
        $('.selection2').css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });
    $('.selection3').click(function() {
        $('.selection3').css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });
    $('.selection4').click(function() {
        $('.selection4').css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });
  });

私は何かが欠けているに違いないと感じています、そしてこれをもっときれいにする方法があると思います。ありがとう！

編集：このコードの機能を明確にしたかっただけです。基本的に、各'selection'クラスは、段落内の文の周りのスパンタグに対応します。このコードを使用すると、ユーザーは各段落をクリックすることで、各段落の1つの文を強調表示できます。別の文をクリックすると、その文が強調表示され、その特定の段落の残りの文の選択が解除されます。

4

7 に答える 7

3

単一のクラスを持ち、次のコードを使用する方が簡単です。

$('.selection').click(function() {        
    $(this).css('background-color', 'white').css('background-color', 'yellow');    
});

奇妙なコードのようですが...クリックしたときに点滅させたいだけだと思いますか？

追加するための編集：覚えておいてください、あなたはオブジェクトに複数のクラスを持つことができます...すなわち<div class="selection selection1>など...

編集2：

更新と投稿されたHTMLから、すべてのスパンに同じクラスを持たせ、これを使用します。

$('.selection').click(function() {            
    $(this).css('background-color', 'yellow').siblings().css('background-color', 'white');    
});

http://jsfiddle.net/shaneblake/9pF6U/

于 2011-06-24T20:54:13.497 に答える
2 
  $(document).ready(function(){
    $('.selection0, .selection1, .selection2, .selection3, .selection4').click(function() {
        $('.'+$(this).attr('class')).css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });
  });

それはあなたがやろうとしていることではないようですが。

最初に背景を白に設定し、次に黄色に設定します。

それはまさにあなたのコードがすることですが

編集

背景の最初の変更を変更して、クリックした要素だけでなく、現在のクラスのすべての要素を表すようにしました（Seanに感謝）。

このコードは、クラスが唯一のクラスであることを想定しています。

コードを表示できれば、これが機能するかどうかを確認するか、回答を更新します。

編集

実例：

http://jsfiddle.net/6Dznp/

于 2011-06-24T20:53:39.693 に答える
1

すべての要素に同じクラスを与えることができませんでしたか？クラスに名前を付ける方法により、クラスはすべてIDのように見えます。それらすべてに選択のクラスを与えて、ただやってください

$('.selection').click(function(){
    $(this).css('background-color', 'yellow');
    $('.selection').not(this).each(function(){
        $(this).css('background-color', 'white');
    });
});

http://jsfiddle.net/QfS3G/

于 2011-06-24T20:54:04.260 に答える
1

セット間で要素の状態を切り替えたいようです。この仮定が正しければ、以下のスニペットを使用できます。

var allItems = '.selection0, .selection1, .selection2, .selection3, .selection4';
$(document).ready(function(){
    $(allItems).click(function() {
            $(allItems).css('background-color', 'white');
            $(this).css('background-color', 'yellow');
    });
});

以下のコードは、質問に投稿されたコードを修正するためのものです。

複数のセレクターをコンマで区切ることにより、1つのセットにマージできます。

これを試して：

$(document).ready(function(){
    $('.selection0, .selection1, .selection2, .selection3, .selection4').click(function() {
            $('.selection0').css('background-color', 'white');
            $(this).css('background-color', 'yellow');
    });
});
于 2011-06-24T20:54:11.453 に答える
1

コンマ-セレクターですべてのクラスを次のように区切ります。

$(document).ready(function(){
    $('.selection0, .selection1, .selection2').click(function() {
        $(this).css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });    
});
于 2011-06-24T20:54:52.677 に答える
1 
for (var i = 0; i <= 4; i++) {
    $('.selection' + i).click(function() {
        $(this).css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });
}

もちろん、それぞれに対して異なることをしたい場合は、次のようなswitchステートメントを含めることができます。

for (var i = 0; i <= 4; i++) {
    $('.selection' + i).click(function() {
        $(this).css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });

    switch (i) {
    case 0:
        // Do something here if we are .selection0
        break;

    case 1:
        // Do something here if we are .selection1
        break;
    }
}
于 2011-06-24T20:59:35.230 に答える
0

これを試して：

$('[class *= selection]').click(function() {
    $(this).css('background-color', 'white');
    $(this).css('background-color', 'yellow');
});

http://api.jquery.com/attribute-contains-selector/

于 2011-06-24T20:56:06.507 に答える