Question

我有一个带有一些文字的段落，如

“这是一个糟糕的段落。好的事情是，这很糟糕。你知道它的坏处是什么？非常糟糕，为什么你不知道这一点。”

如何在点击任何“坏”字时触发事件。没有用<span class="good-class">bad</span>或其他任何东西替换'坏'字？

Answer 1

仅使用选择器无法实现您想要实现的目标。由于选择器选择整个元素。但是，你可以在这里做一些小技巧：

＆＃13;

var $el = $(".my-text"),
    html = $el.html();
   
// Replace with spans
html = html.replace(/\b(bad)\b/ig,"<span class='bad-text'>$1</span>");
// Update content 
$el.html(html);

// Assign click handler to those new elements
$(".bad-text").on("click", function(e) {
  alert(this.textContent);
});

＆＃13;

.bad-text{color:red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="my-text">
Bad! This is a bad paragraph. The good things is, this is bad. Very bad, why you do not know this. Simbad is a badass
</p>

＆＃13;

首先替换“坏”字样。使用一些选择器，然后绑定该选择器。

Answer 2

我最初的想法是，您可以获取元素的innerHTML，然后在“坏”的文本周围添加跨度并向其添加eventListener。当然，如果你有权访问html，你可以直接在它们周围放置。

通过Id或TagName或其他东西在DOM中选择你的段落 - 如果没有原始的html，很难告诉你哪一段。

然后将“bad”替换为“bad”，接下来访问所有这些跨度并向其添加事件侦听器。在事件监听器内部进行双重检查，检查跨度内容是否为“坏”，然后执行您想要的任何代码。

var el = document.getElementById("this-text");
var text = el.innerHTML;
var newText = text.replace(/\bbad\b/g, "<span>bad</span>");
el.innerHTML = newText;
var spans = el.getElementsByTagName('span')
for (let i=0; i<spans.length; i++) {
  spans[i].addEventListener('click', function() {
    if(this.innerHTML === 'bad') {
      alert('You clicked bad') // put whatever you want here
    }
}, false);
}

这里还有一个小提琴https://jsfiddle.net/BrettEast/attg0zqz/

关于任何已知单词

2 个答案: