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 组，则第 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) 更改不透明度，但不知道如何在代码中处理它以及将它放在哪里。

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

谢谢

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 
$('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 即可。

于 2010-05-06T13:33:17.230 回答
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 回答
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 回答