0

私はJavascriptにかなり慣れていないので、div内の領域をクリックしてポイントを定義できるようにするdivを作成したいと考えています。クリックしたポイントを表す画像が追加されます。その後、このポイントを削除したい場合は、画像をクリックして削除する必要があります。

私は、既存のフィドルへのマイナーな変更に基づいてポイントを定義できるようにする部分を実行しました: http://jsfiddle.net/uKkRh/1/ 参照: jquery how to add pin to image and save the position to 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