10

我有一个脚本，可以根据鼠标在页面主体上的位置放置 div。我有一个按钮，上面写着“清除”，我想用它来清除创建的 div。我怎样才能做到这一点？

我写的脚本和来源：

HTML

<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <script src="bhaiya.js"></script>
        <button style="z-index: 2000;" class="clear" onclick="clear()">Clear</button>
    </body>
</html>

jQuery

$(document).ready(function(){

    $(this).mousedown(function(e){
        $x = e.pageX;
        $y = e.pageY;

        $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
        $("body").prepend($div);
    });

    function clear() {
        $(".theDiv").remove();
    }

})

jsFiddle：http: //jsfiddle.net/BpAYz/

任何帮助，将不胜感激 ：）

4

5 回答 5

10

内联 html 属性事件处理程序只能调用全局函数。您的clear()函数不是全局的，因为它是在您的文档就绪处理程序中定义的，因此您onclick="clear()"找不到它。您需要将函数移到就绪处理程序之外（使其成为全局），或者更好的是，将单击与 jQuery 绑定：

$(document).ready(function(){    
    $(this).mousedown(function(e){
        var $x = e.pageX;
        var $y = e.pageY;    
        var $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
        $("body").prepend($div);
    });

    $(".clear").click(function () {
        $(".theDiv").remove();
    });
});

另请注意，我已var在 mousedown 处理程序中的变量前面添加：没有var它们成为全局变量，这只会使您的代码更容易出错并且难以调试。（除非你有充分的理由为什么它们应该是全局变量？）

于 2013-06-08T11:50:07.500 回答
2

该函数clear应该在全局范围内。否则，给button1按钮一个 id 并使用 jQuery 将函数添加为click事件侦听器。

http://jsfiddle.net/BpAYz/2/

代码：

JS

$(document).ready(function () {

    $(this).mousedown(function (e) {
        if (!$(e.target).is("#button1")) {
            $x = e.pageX;
            $y = e.pageY;

            $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
            $("body").prepend($div);
        }
    });

    $(".clear").click(function () {
        $(".theDiv").remove();
    });

})

HTML

<body>
    <button id="button1" style="z-index: 2000;" class="clear">Clear</button>
</body>

我刚刚修改了你的代码。var在函数中声明变量时请使用关键字。

于 2013-06-08T11:44:12.213 回答
2

这样做：http: //jsfiddle.net/Qn9yL/1/

您应该附加到按钮的点击，而不是使用 onclick。

$(document).ready(function(){

    $(this).mousedown(function(e){
        $x = e.pageX;
        $y = e.pageY;

        $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
        $("body").prepend($div);
    });

    $('#clear').click(function(e){
        e.preventDefault();
        $(".theDiv").remove();
    });

})

您还想做 e.preventDefault(); 停止事件然后冒泡并创建一个新的 div 等。

于 2013-06-08T11:50:23.777 回答
1

你需要这样做：-

清除 

$(document).ready(function(){

$(this).mousedown(function(e){
    $x = e.pageX;
    $y = e.pageY;

    $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
    $("body").prepend($div);
});

$(document).on("click", "button.clear", function(e){
    e.stopPropagation();
      $(".theDiv").remove();
})

})

于 2013-06-08T11:45:11.517 回答
-5

这适用于连续元素：

<style media="all">
.theDiv {
    display:none;
}
</style>
于 2014-12-08T08:16:17.887 回答