javascript - 如何为文本中的元素分配唯一的点击事件？

Question

我想要的是:

1. 当我点击什么？文本时，会出现带有文本“继续”的工具提示，但我希望工具提示显示在什么？上> 文本而不是继续文本。
2. 当我点击工具提示时，我希望它消失，我的意思是当我点击文本“嘿嘿”时，它会消失，但当我点击工具提示时，它不会消失。如何将其设置在“工具提示”类而不是“关闭”类上。

谢谢。 为了更好地理解，我在这里添加我的工作；

$(document).ready(function() {
  $(".content a").click(function() {
    var obj = $(this);
    var tooltip = obj.data("tooltip");
    obj.append('<div class="tooltip">' + tooltip + '</div>');
  });
  $(this).mousemove(function() {
    var x = $(".text").position();
    $(".tooltip").css({
      "top": x.top - 35,
      "left": x.left - 35
    });
  });

  $(".close").click(function() {
    $(".tooltip").hide();
  });
});

body {
  margin: auto;
  font: 14px/22px Arial;
  background: #ddd
}
.content {
  width: 500px;
  margin: 10px auto;
  background: #fff;
  border: 5px solid #eee;
  padding: 10px
}
.content a {
  color: #fa6578
}
.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  background: #333;
  padding: 5px;
  color: #fff
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <span class="close">hey hey </span><a class="text" href="#" data-tooltip="go on">go on</a> bla bla bla <a class="text" href="#" data-tooltip="what?">what?</a>
</div>

Answer 1

其实你不需要用jquery设置位置，你可以相对于a父级；同样对于 close 操作，在工具提示上使用相同的类:

$(document).ready(function() {
  $(".content a").click(function() {
    $(".tooltip").hide();
    var obj = $(this);
    var tooltip = obj.data("tooltip");
    obj.append('<div class="tooltip close">' + tooltip + '</div>');
  });

  $("body").on('click','.close',function() {
    $(".tooltip").hide();
  });
});

body {
  margin: auto;
  font: 14px/22px Arial;
  background: #ddd
}
.content {
  width: 500px;
  margin: 10px auto;
  background: #fff;
  border: 5px solid #eee;
  padding: 10px
}
.content a {
  color: #fa6578;
  position:relative;
}
.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  width:100%;
  z-index: 3;
  background: #333;
  padding: 5px;
  color: #fff
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <span class="close">hey hey </span><a class="text" href="#" data-tooltip="go on">go on</a> bla bla bla <a class="text" href="#" data-tooltip="what?">what?</a>
</div>