リスト内のjqueryからハイライト要素

Question

私はOLリストを持っています：

<ol>
<li class="group1">item 1</li>
<li class="group1">item 2</li>
<li class="group2"> item 3</li>
<li class="group3">item 4</li>
<li class="group1">item 5</li>
<li class="group3"> item 6</li>
<ol>

クラス名に対応するチェックボックスのセット

<input type="checkbox" value="group1" />group 1
<input type="checkbox" value="group2" />group 2
<input type="checkbox" value="group3" />group 3

私が起こりたいのは、ユーザーがチェックボックスをクリックして「チェック」すると、チェックされていないLI行がフェードアウト（不透明度を変更）し、チェックボックスの値に一致するクラスを持つ行がハイライトであるということです。 （背景色が黄色に変更されました）。

たとえば、グループ3をクリックした場合、アイテム4とアイテム6が強調表示されます。その後、グループ2がクリックされた場合、アイテム3が強調表示されます（アイテム4と6が強調表示されたままです）。グループ2が刻まれていない場合、アイテム4と6は強調表示されたままですが、アイテム3はフェードアウトされます。

私が現在持っているコードは次のとおりです。

$('input').click(function(){
    input = $(this);
    classVal = "." + input.val();
    elements = $(classVal );

    if (input.is(':checked')) {
        elements.css("background-color", "#FFFF00");
    } else {
        elements.css("background-color", "");
    }
});

これにより、ハイライトが処理されますが、未確認の要素のフェードは行われません。 CSS（「不透明度」、0.33）またはFadeto（「スロー」、0.33）を使用して不透明度を変更できることは知っていますが、コードでこれを処理する方法とそれを置く場所がわかりません。

私の他のコードのいずれかを片付けることができれば、私に知らせてください

ありがとう

Answer 1

jQueryコード：

$('input:checkbox').bind('click', function(){
    var checkedClasses = $("input:checked").map(function() {
        return $(this).val();
    });
    var uncheckedOpacity = (checkedClasses.length == 0) ? 1.0 : 0.5;
    $('ol li').css({opacity: uncheckedOpacity, backgroundColor: 'transparent'});
    $.each(checkedClasses, function(index, value){
        $('.' + value).css({backgroundColor: '#ff0', opacity: 1.0});
    });
});

このHTML：

<ol>
    <li class="group1">item 1</li>
    <li class="group1">item 2</li>
    <li class="group2">item 3</li>
    <li class="group3">item 4</li>
    <li class="group1">item 5</li>
    <li class="group3">item 6</li>
<ol>

<form>
    <label><input type="checkbox" value="group1" />group 1</label>
    <label><input type="checkbox" value="group2" />group 2</label>
    <label><input type="checkbox" value="group3" />group 3</label>
</form>

Answer 2

$('input').click(function(){
 input = $(this);
 classVal = "." + input.val();
 elements = $(classVal );

 if (input.is(':checked')) {
     elements.css("background-color", "#FFFF00");
     elements.css("opacity", 1);
 } else {
     elements.css("background-color", "");
     elements.css("opacity", 0.33);
 }
});

そのことについて何？要素に別のCSS attrを追加するだけです。

Answer 3

たぶん私は何かが足りないのかもしれませんが、背景色を変える線の直後にそれを置いてみませんか？

$('input').click(function(){
    input = $(this);
    classVal = "." + input.val();
    elements = $(classVal );

    if (input.is(':checked')) {
        elements.css("background-color", "#FFFF00");
        elements.fadeTo("slow", 1.0);
    } else {
        elements.css("background-color", "");
        elements.fadeTo("slow", 0.33);
    }
});

Answer 4

最初は、選択されていないものを望んでいます li フェードする要素。この目的のために、各（）関数を使用する必要があります。以下を試してみてください。このコードを確認しましたが、正常に動作しています。

$('input').click(function() {

            $('input').each(function(index) {

                input = $(this);
                classVal = "." + input.val();
                elements = $(classVal);

                if (input.is(':checked')) {
                    elements.css("background-color", "#FFFF00");
                    elements.fadeTo("slow", 1.0);

                } else {
                    elements.css("background-color", "");
                    elements.fadeTo("slow", 0.33);
                }
            });
        });