Question

我正在尝试创建一个清单。单击li元素时，该元素的子div应该变为可见。

<div id="list_one">
    <h2>LIST TITLE</h2>
    <div id="line"></div>
    <ul>
        <li id="1-1"><div class="blue_line"></div><div class="circle"></div>TASK ONE</li>
        <li id="1-2"><div class="blue_line"></div><div class="circle"></div>TASK TWO</li>
        <li id="1-3"><div class="blue_line"></div><div class="circle"></div>TASK THREE</li>
        <li id="1-4"><div class="blue_line"></div><div class="circle"></div>TASK FOUR</li>
        <li id="1-5"><div class="blue_line"></div><div class="circle"></div>TASK FIVE</li>
        <li id="1-6"><div class="blue_line"></div><div class="circle"></div>TASK SIX</li>
    </ul>
</div>

这是我的Javascript：

$(document).ready(function() {
    $(".blue_line").css("visibility","hidden");

    $("li").click(function() {
        var id = this.id;
        console.log(id);
        $(id).children().css("visibility","visible");
    });
});

Answer 1

您不需要像这样使用id。使用$（this）访问LI：

$(document).ready(function() {
    $(".blue_line").css("visibility","hidden");
    $("li").click(function() {
        $(this).children().css("visibility","visible");
    });
});

正如其他地方所指出的，当您需要$(id)使其成为有效的jQuery ID选择器时，原因是使用$('#' + id)

Answer 2

您必须包含#字符：

$(document).ready(function() {
    $(".blue_line").css("visibility","hidden");
    $("li").click(function() {
        var id = this.id;
        console.log(id);
        $("#" + id).children().css("visibility","visible");
    });
});

但正如已经提到的，在事件中使用$(this)更有意义：

$(document).ready(function() {
    $(".blue_line").css("visibility","hidden");
    $("li").click(function() {
        $(this).children().css("visibility","visible");
    });
});

Answer 3

请注意我是否说得对，但是：

$("li").on('click', function() {
    $(this).toggleClass('checked');
});

小提琴：http://jsfiddle.net/C6Qav/1/

“单击某个项目时，添加一个显示蓝线的已检查类”。

这种方式更好 - 使用类更少侵入性，当css文件中有.checked类时，你可以在css文件中做任何你想做的事情（不用javascript直接添加样式到元素推荐）。

PS避免在任何地方使用ID。

目标<li>元素的孩子</li>

3 个答案: