2

在此处输入代码在此处输入代码'好的，所以我有一个图像，我正在制作另一个图像附加到它点击一个按钮。图像附加，我得到了位置的坐标。我还使用 jquery ui 制作了图像 draggalbe。每次添加图像时，还会生成一个 div，其中包含被单击图像的坐标和区域。在那个新生成的 div 中有一个删除按钮，可以删除该分区。我需要使该删除按钮也删除与该 div 对应的附加特定图像。我真的很感激任何关于这个谢谢的帮助。

<!DOCTYPE html>
<html>
    <head>
                <meta charset="utf-8" />
                    <title>MyMapImage</title>
                <style type="text/css">
                    #container {
                        background: green;
                        width: 596px;
                        height: 218px;
                        position: relative;
                        cursor: crosshair;

                    }
                    #container img {
                        position: absolute;  
                            opacity:0.95;
                    }

                    #container img.cross {
                        position: absolute;  

                    }
                </style>
                <style type="text/css">
        #draggable {font-size:x-large; border: thin solid black; width: 5em; text-align: center}
    </style>



                <script type="text/javascript">
                    $(document).ready(function() {
                    $(".WindSh").click(function(e) {
                        e.preventDefault();
                        var x = e.pageX - this.offsetLeft;
                        var y = e.pageY - this.offsetTop;
                        var img = $('<img>');
                        img.css('top', y-23);
                        img.css('left', x-23);
                        img.attr('src', 'cross.png');
                        img.attr('class','cross');
                        img.appendTo('#container');
                        img.draggable({
                        containment: "parent"
                        });
                    })

                });
                </script>
                <script type="text/javascript">

                    $(document).ready(function() {
                      $('.WindSh').click(function(e) {
                        var offset = $(this).offset();
                        var xz= e.clientX - this.offsetLeft;
                        var yz= e.clientY - offset.top;

                        if (parseInt(xz)>= 38 && parseInt(xz)<=200 && parseInt(yz)>=15 && parseInt(yz)<=98)
                        {
                        $('<div/>').append((xz) + ", " + (yz) + " ; " + "You have selected Region 1")
                        .appendTo('#coordinates');    
                        }
                        else if (parseInt(xz)> 200 && parseInt(xz)<=401 && parseInt(yz)>=15 && parseInt(yz)<=98)
                        {
                        $('<div/>').append ((xz) + ", " + (yz) + " ; " + "You have selected Region 2")
                        .appendTo('#coordinates');

                        }
                        else if (parseInt(xz)> 401 && parseInt(xz)<=540 && parseInt(yz)>15 && parseInt(yz)<=98)
                        {
                        $('<div/>').append ((xz) + ", " + (yz) + " ; " + "You have selected Region 3")
                        .appendTo('#coordinates');
                        }
                        else if (parseInt(xz)> 12 && parseInt(xz)<=200 && parseInt(yz)>98 && parseInt(yz)<=186)
                        {
                        $('<div/>').append ((xz) + ", " + (yz) + " ; " + "You have selected Region 4")
                        .appendTo('#coordinates');
                        }
                        else if (parseInt(xz)> 200 && parseInt(xz)<=401 && parseInt(yz)>98 && parseInt(yz)<=186)
                        {
                        $('<div/>').append ((xz) + ", " + (yz) + " ; " + "You have selected Region 5")
                        .appendTo('#coordinates');
                        }
                        else if (parseInt(xz)> 401 && parseInt(xz)<=540 && parseInt(yz)>98 && parseInt(yz)<=186)
                        {
                        $('<div/>').append ((xz) + ", " + (yz) + " ; " + "You have selected Region 6")
                        .appendTo('#coordinates');
                        }   
                      });
                    });
                </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.hide').click(function(){
            $('.cross').hide();
            });
        });
    </script>

    </head>
    <body
    <div id="container"><img class="WindSh" src="WindShield.png"></div>
    <div>Coordinates x,y: <span id="coordinates"></span></div>
    <input type="button" class="hide" value="hide">

    </body>
</html>
4

1 回答 1

0

所以我必须让这个图像 x 附加在另一个图像 y 之上。图像 x 应该给出附加在图像 y 上的坐标。2，当附加图像 x 时，它会打开另一个 div，其中显示附加图像 x 的坐标。在那个 div 中也有一个删除按钮。删除按钮当前删除该行，但我也希望该删除按钮删除与该 div 对应的附加图像。谢谢

于 2012-11-06T05:27:23.403 回答