javascript - 单击javascript或jquery中的文本时如何获取字符串

Question

我有一个如下所示的列表字符串。

<p>sub1/sub2/sub3</p>

如果鼠标点击sub1，如何获取sub1？例如:

• 如果点击 sub1 返回 sub1

• 如果点击 sub2 返回 sub1/sub2

• 如果点击 sub3 返回 sub1/sub2/sub3

我怎样才能做到这一点？

Answer 1

All thing load from database, I can't put it in to a span

在本例中，通过 / 将文本拆分为一个数组，然后将数组中的每个元素包装在 span 中，并将其附加回 DOM。然后，您可以添加委托(delegate)事件处理程序来获取当前元素和所有先前同级元素的文本。试试这个:

$('p')
  .html((i, h) => h.split('/').map(w => `<span>${w}</span>`).join('/'))
  .on('click', 'span', function() {
    var text = $(this).prevAll().addBack().map((i,e) => e.textContent).get().join('/');
    console.log(text);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>sub1/sub2/sub3</p>
<p>sub4/sub5/sub6</p>

On IE it does not work

这是因为我使用了 ES6 箭头函数，而 IE 不支持它，因为它已经过时了。如果您需要 IE 支持，请将其更改为匿名函数:

$('p')
  .html(function(i, h) {
    return h.split('/').map(w => `<span>${w}</span>`).join('/');
  })
  .on('click', 'span', function() {
    var text = $(this).prevAll().addBack().map(function() {
      return this.textContent;
    }).get().join('/');
    console.log(text);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>sub1/sub2/sub3</p>
<p>sub4/sub5/sub6</p>