Question

＆＃13;

$(document).ready(function() {
		  $('img').click(function(e) {
			    var offset = $(this).offset();
			    /*alert("X: " + (e.pageX - offset.left) + " / Y: " + (e.pageY - offset.top));*/
			    $(this).after('<h3 class="label">Label</h3>');

			    $('.label').offset({ top: e.pageY - offset.top, left: e.pageX - offset.left });

		  });
		});

＆＃13;

.label {
	position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

	<img src="http://mdikici.com/wp-content/uploads/2014/12/living-room-underlay-glossy-laminate-flooring-with-grey-microfiber-sleeper-sofa-and-nice-indoor-fireplace-in-amazing-minimalist-living-room-design-trendy-minimalist-living-room-design-ideas.jpg" alt="Living Room" title="Living Room" usemap="#tagarea" />

</body>

＆＃13;

感谢您帮助我。

让我澄清一下我想要实现的目标，我有一个带有各种物体（电视，沙发等）的起居室的图像，当我点击说电视区域时，我想在旁边添加一个图像标签它，现在我已经实现了这一部分但是当我再次点击任何其他区域时说如果我点击沙发然后图像标签从电视区域消失并显示在沙发区域附近，所以基本上我希望此功能循环并且应该能够添加多个图像标签。

请检查脚本，并告诉我如何修复它。

$(document).ready(function() {
      $('img').click(function(e) {
            var offset = $(this).offset();
            $(this).after('<img src="images/badge.png" alt="Badge" title="Badge" class="label" />');

            $('.label').offset({ top: e.pageY - offset.top, left: e.pageX - offset.left });

      });
    });

    <body><img src="images/living-room-1.jpg" alt="Living Room" title="Living Room" /></body>

由于

Answer 1

问题是因为虽然您添加了新的img，但.label的选择器正在改变所有 img元素的位置 - 即使是之前添加的元素。您需要修改代码以仅与要添加的新img元素相关联。试试这个：

$('img').click(function(e) {
    var offset = $(this).offset();
    $('<img src="images/badge.png" alt="Badge" title="Badge" class="label" />')
        .insertAfter(this)
        .offset({ 
            top: e.pageY - offset.top, 
            left: e.pageX - offset.left 
        });
  });

更新

鉴于您更新的HTML示例和要求，这应该适合您：

$('img').click(function (e) {
    var offset = $(this).offset();
    $('<h3 class="label">Label</h3>')
        .insertAfter(this)
        .css({
            top: e.pageY - offset.top,
            left: e.pageX - offset.left
        });
});

Example fiddle

在jQuery中重复单击事件而不删除以前的单击效果

1 个答案: