Question

我有一个名单：

<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行都是fadedOut（更改不透明度），然后是任何具有与该值匹配的类的行复选框是荧光笔（背景颜色变为黄色）。

因此，例如，如果单击组3，则将突出显示项目4和项目6。然后，如果单击组2，则项目3将突出显示（项目4和6将保持突出显示）。如果第2组未被勾选，第3项将会逐渐淡出，但第4项和第6项仍然会突出显示。

我目前的代码是：

$('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）更改不透明度，但不知道如何在代码中处理它以及放置它的位置。

如果我的其他任何代码都可以整理，请告诉我

由于

Answer 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);
    }
});

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

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 4

最初，您还希望取消选择未选中的 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);
                }
            });
        });

Jquery突出显示列表中的元素

4 个答案: