0

我对 Javascript 相当陌生，想创建一个 div，它允许人们通过单击 div 内的区域来定义其上的点。将添加一个图像来表示单击的点。此后，如果该人想要删除该点，则在单击图像时，应将其删除。

我已经完成了允许人们根据对现有小提琴的微小修改来定义点的部分：http: //jsfiddle.net/uKkRh/1/ 参考：jquery 如何将引脚添加到图像并将位置保存到SQL

我还设法通过单击按钮删除所有图像。

但是，当人们单击图像时，我仍然不知道如何从 div 中删除图像。

我尝试了以下方法：

$('#container >img').click(function() {

   var selectedImg = $(this);
   selectedImg.remove();
   return;
 });

但它会间歇性地工作。

请参阅我的 JSfiddle 以获取我的示例。http://jsfiddle.net/WindSaviour/rUNsJ/19/

var point = [];
var id = 0;
$(document).ready(function() {
    var output = $('#container');



    $("#container").click(function(e) {
        e.preventDefault();
        var isPointPresent = false;
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        console.log("Mouse Click Pos (x=" + x + ", y=" + y + ")");

        for(var i=0; i< point.length; i++)  {

            if(x >= point[i].min_x && x<=point[i].max_x) {
                if(y >= point[i].min_y && y<=point[i].max_y) {
                    isPointPresent = true;
                    point.splice(i,1);
                    break;
                }
            }
        }
        point[point.length] = { "x-pos":  x, "y-pos":y, "min_x": x-25, "max_x": x+25, "min_y": y-83, "max_y": y};

        if(isPointPresent) {
            $('#container >img').click(function() {

                var selectedImg = $(this);
                selectedImg.remove();
                return;
            });
        }


        var img = $('<img>');
        var left = x-25;
        var top = y-83;
        console.log("Img Start Pos (x=" + left + ", y=" + top + ")");
        img.css('top', top);
        img.css('left', left);
        img.attr('src', 'http://www.clker.com/cliparts/P/w/G/0/N/o/google-map-th.png');

        img.attr('id', id);
        img.appendTo('#container');
        /*
        */
        id++;
    })



});

$('#remove').click(function() {
   $('#container > img').remove();
});
4

1 回答 1

1

试试这个http://jsfiddle.net/uKkRh/635/，但你需要更新版本的 jQuery

$('#container').on('click', 'img', function (e) {
    e.stopPropagation();
    $(this).remove();
});
于 2013-04-23T09:40:40.160 回答