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

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

Using $("#list").children().remove(); will also work but the first one is more efficient.

I think you should also exclude the clear button from your list and put your code inside .ready() handler so that the code executes after DOM is ready and your elements are loaded:

$(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 に答える