1

私は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（ "opacity"、0.33）またはfadeTo（ "slow"、0.33）を使用して不透明度を変更できることは知っていますが、コードでこれを処理する方法と配置する場所がわかりません。

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

ありがとう

4

4 に答える 4

1

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

$('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);
    }
});
于 2010-05-06T13:31:31.053 に答える
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>
于 2010-05-06T14:05:32.367 に答える
1 
$('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);
 }
});

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

于 2010-05-06T13:33:17.230 に答える
0

最初は、選択されていないli要素をフェードさせたい場合もあります。この目的のために、each（）関数を使用する必要があります。以下をお試しください。このコードを確認しましたが、正常に機能しています。

$('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);
                }
            });
        });
于 2010-05-06T14:07:17.807 に答える