列表中的Hightlight元素

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

最初，您也希望未选择 李 要褪色的元素。为此，您需要使用每个（）函数。请尝试以下内容。我已经检查了此代码，并且工作正常。

$('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);
                }
            });
        });