jquery - jQueryで1つの要素を選択する方法

Question

私は自分のアプリケーションに対して別の種類のレビューシステムを試しています。値が1から5のラジオボタンが5つあり、すべての値が色を表します。

ユーザーが映画「バットマン：ダークナイト」をレビューしようとすると、次のようになります。

ここに画像の説明を入力してください

ユーザーが値をクリックすると、背景色が変更されます。私はこれを制御するためにjQueryを使用しています。

問題は次のとおりです。ユーザーは1つの値のみを選択でき、その値のみが背景色を変更する必要があります。今すぐ変更すると、任意の値をクリックすると、その背景色が変更されます。

jQueryでそれを行うにはどうすればよいですか？ヒントやアイデアは大歓迎です！

これがjsfiddleの例です：http：//jsfiddle.net/puWJZ/

HTML：

<label class="input-check ch1">
 <input id="#rb1" type="radio" value="1"   name="reviewbutton" /> Bad
</label>
<label class="input-check ch2">
 <input id="#rb2" type="radio" value="2"   name="reviewbutton" /> Acceptable
</label>
<label class="input-check ch3">
 <input id="#rb3" type="radio" value="3"   name="reviewbutton" /> Good
</label>
<label class="input-check ch4">
 <input id="#rb4" type="radio" value="4"   name="reviewbutton" /> Very good
</label>
<label class="input-check ch5">
 <input id="#rb5" type="radio" value="5"   name="reviewbutton" /> Excellent
</label>
<div class="box">POP UP!</div>

CSS：

.input-check {
    display: block;
    height:20px;
    padding:10px;
    width:90px;
    color:#EEEEEE;
    font-weight: 600;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #333333;
    margin:10px;
    cursor: pointer;
}
input {
    display:none;
}
.ch1:hover{background-color: #ba0012; cursor: pointer;}
.ch2:hover{background-color: #ba0099; cursor: pointer;}
.ch3:hover{background-color: #00ba88; cursor: pointer;}
.ch4:hover{background-color: #0bbdf0; cursor: pointer;}
.ch5:hover{background-color: #f0b10b; cursor: pointer;}

jQuery：

$(document).ready(function(){
    $('.box').hide();
    /* Bad */
    $('.ch1').click(function(){
        $(this).css({'background-color' : '#ba0012'});
        $('.box').show();
    });
    /* Acceptable */
    $('.ch2').click(function(){
        $(this).css({'background-color' : '#ba0099'});
        $('.box').show();
    });
    /* Good */
    $('.ch3').click(function(){
        $(this).css({'background-color' : '#00ba88'});
        $('.box').show();
    });
    /* Very good */
    $('.ch4').click(function(){
        $(this).css({'background-color' : '#0bbdf0'});
        $('.box').show();
    });
    /* Excellent */
    $('.ch5').click(function(){
        $(this).css({'background-color' : '#f0b10b'});
        $('.box').show();
    });
});

score 2 · Accepted Answer

残りの要素の色をリセットするには、次のように追加します。

$('.input-check').css('background-color',"");

すべてのイベントハンドラーに。

これがデモンストレーションです：http：//jsfiddle.net/puWJZ/1/

または、このイベントリスナーをコードの最後に追加することもできます。

$('.input-check').click(function(){
    $('.input-check').not(this).css('background-color',"");
});

これが代替アプローチのデモンストレーションです：http：//jsfiddle.net/puWJZ/3/

score 1 · Accepted Answer

私はあなたがそれをしている方法が本当に好きではありません、あなたは各ラベルのために関数を作成する必要はありません。しかし、あなたがやりたいのはjQuerynotセレクターを使用することだと思います。これを行うためのより良い方法を提案しましょう。

$(document).ready(function(){
    var myColors=new Array('#ba0012', '#ba0099', '#00ba88', '#0bbdf0', '#f0b10b');
    $('.box').hide();
    $('.input-check').click(function(){        
        $(this).css({'background-color' : myColors[$('.input-check').index($(this))]});
        $('.input-check').not($(this)).css({'background-color' : ''});
        $('.box').show();
    });
});

http://jsfiddle.net/puWJZ/7/

score 1 · Accepted Answer

インラインCSSを完全に削除し、代わりにボタンのクラスを切り替えます。あなたはすでにあなたの:hoverスタイルにすべてのcssの色を持っています、activeクラスを含めるためにセレクターを追加するだけで、インラインcssを保存して元に戻すよりもクラスを削除する方がはるかに簡単なので、はるかにきれいになります

CSSサンプル

.ch1:hover, .ch1.selected {background-color: #ba0012; cursor: pointer;}

クラスを変更するJS：

$('.input-check').click(function(){
   $('.input-check.selected').removeClass('selected');
   $(this).addClass('selected');

     /* other code when clicked*/
})

score 0 · Accepted Answer

他の回答で述べたように、すべてのボタンのクリックイベントを処理するには、必ず1つのコードを使用してください。ここでは、bgcolorをカスタム属性として各ラジオボタンに追加しました。

<input id="#rb1" type="radio" value="1"   name="reviewbutton" bgcolor="#ba0012"/> Bad

また、すべての入力ラベルにクラスを追加しました。

<label class="input-check ch1 rating_item">

次に、これらの要素のいずれかがクリックされているかどうかを確認し、カスタム属性からbgbolorを取得して、クリックされた要素に設定します（そして他のすべての要素をリセットします）

$(document).ready(function(){
    $('.box').hide();
    $('.rating_item').click(function(){
        $('.rating_item').each(function(){
            $(this).css("background-color","#333333");
        });
        var this_bg_color = $(this).children().attr("bgcolor");
        $(this).css('background-color',this_bg_color);
        $('.box').show();
    });
});

http://jsfiddle.net/UxyWq/3/

score 0 · Accepted Answer

これは、他のすべての色を元の色に戻すための非常に基本的な方法です。

$('.ch2, .ch3, .ch4, .ch5').css({'background-color' : '#333'});

http://jsfiddle.net/puWJZ/5/

score 0 · Accepted Answer

クラスを使用してラベルをマークし、そのクラスをホバーcssと同じように設定します

css：

.ch1:hover,.ch1.checked{background-color: #ba0012; cursor: pointer;}
.ch2:hover,.ch2.checked{background-color: #ba0099; cursor: pointer;}
.ch3:hover,.ch3.checked{background-color: #00ba88; cursor: pointer;}
.ch4:hover,.ch4.checked{background-color: #0bbdf0; cursor: pointer;}
.ch5:hover,.ch5.checked{background-color: #f0b10b; cursor: pointer;}

js：

$(document).ready(function() {
    $('.box').hide();
    $('label.input-check input').click(function(e) {
        e.stopPropagation();
        $('label.input-check').removeClass('checked');
        //the reason for next string it is just to make same code compatible with checkboxes
        //if not needed it ok to set $(this).parent().addClass('checked');
        $('label.input-check input:checked').parent().addClass('checked');
    });
    $('label.input-check').click(function(e) {
        var $t = $(this);
        if ($t.attr('type') == 'radio') {
            return true;
        }
        $t.children().first().click();
    });
});

デモ

これを解決する別の方法は、入力を親と同じサイズにし、不透明度を0に設定することです。

js：

$(document).ready(function() {
    $('.box').hide();
    $('label.input-check input').click(function(e) {
        $('label.input-check').removeClass('checked');
        //the reason for next string it is just to make same code compatible with checkboxes
        //if not needed it ok to set $(this).parent().addClass('checked');
        $('label.input-check input:checked').parent().addClass('checked');
    });

});

cssで入力を削除し、これを設定します。

label.input-check input {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
}
.ch1:hover,.ch1.checked{background-color: #ba0012; cursor: pointer;}
.ch2:hover,.ch2.checked{background-color: #ba0099; cursor: pointer;}
.ch3:hover,.ch3.checked{background-color: #00ba88; cursor: pointer;}
.ch4:hover,.ch4.checked{background-color: #0bbdf0; cursor: pointer;}
.ch5:hover,.ch5.checked{background-color: #f0b10b; cursor: pointer;}

demo2

jquery - jQueryで1つの要素を選択する方法

6 に答える 6

Related

Reference