0

我已经盯着这个问题看了好几个小时。我刚开始学习 Jquery，我有一个小项目需要我使用一个按钮来清除无序列表的元素。

首先，我最常跟踪用户的鼠标位置和鼠标点击。每次他们单击按钮时，我都会构建一个无序列表并记录 x,y 位置。然后，我应该使用一个按钮来清除列表。一切似乎都工作正常，但是单击该按钮时，会添加到列表中而不是清除它。

谁能帮我发现问题？

<!doctype html>
<head>
<title>Click away</title>
<link href="stylesheets/standard.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var count = 0;
$("html").click(function(){
count++; 
$("#display").html("The click count is: " + count);
});
$("html").click(function(e) {
var xPos = e.pageX;
var yPos = e.pageY;
$("#list").append("<li>" + xPos + ", " + yPos + "</li>");
});
//This is the section I can't get to work
$("#clear").click(function () {
$("#list").remove();
}); 
</script> 
</head>
<body>
<h1> Click away</h1>
<h2>Start clicking...</h2>  
<h2 id="display"></h2>
<button id="clear">Clear the location list</button> 
<h2>Click locations:</h2>   
<ul id="list"></ul>
</body>
</html>
4

2 回答 2

1

采用$("#list").empty();

使用$("#list").children().remove();也可以，但第一个更有效。

我认为您还应该从列表中排除清除按钮并将代码放在.ready()处理程序中，以便在 DOM 准备好并加载元素后执行代码：

$(document).ready(function(e) {

    var count = 0;
    $("html").click(function () {
        count++;
        $("#display").html("The click count is: " + count);
    });
    $("html").click(function (e) {
        if (e.target !== document.getElementById('clear')) { //exclude the clear button 
            var xPos = e.pageX;
            var yPos = e.pageY;
            $("#list").append("<li>" + xPos + ", " + yPos + "</li>");
        }
    });

    $("#clear").click(function () {
        $("#list").empty(); //empty list
    });

});
于 2013-02-19T02:11:39.050 回答
0

$("#list").empty();

它将清除该元素的所有子元素。

于 2013-02-19T02:01:45.840 回答