我有一个包含大约30,000个单词的HTML文档。
当用户单击任何单词时,我想做一些事情。为了简化/概念,现在我只想使用 alert()
弹出那个单词。
例如,在上面的段落中,如果我点击“have”,它应该运行alert("have")
。
我正在使用jQuery。
我有一个包含大约30,000个单词的HTML文档。
当用户单击任何单词时,我想做一些事情。为了简化/概念,现在我只想使用 alert()
弹出那个单词。
例如,在上面的段落中,如果我点击“have”,它应该运行alert("have")
。
我正在使用jQuery。
var p = $('p');
p
.html(function(index, oldHtml) {
return oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>')
})
.click(function(event) { alert(event.target.innerHTML) });
我考虑了Pablo Fernandez的建议。
那么,这样做是否有良好的性能(例如,它不会使缓慢用户的浏览器冻结?)此外,你能详细解释一下event.target是如何工作的吗?
如果页面有30,000个单词,这种方法很可能会影响性能。我认为这太过于冗余了,可能需要分页处理,但具体情况需要视实际情况而定。
event.target
属性保存了启动事件的元素 - 事件冒泡 / 传播到其父级,然后由其父级处理事件,因此您不必在单独的元素上处理30,000个事件。
event.target
属性。 - Pablo Fernandez我没有仔细查看代码,无法准确地说明它是如何完成的,但事实上它是在这里完成的,而不需要插入任何额外的span或其他元素到句子中。
很遗憾,我认为您需要处理文本并在每个单词周围放置<span class ='clickableWord'>
YOUR_WORD </span>
。
然后:
$(".clickableWord").click(
function(this){alert(this.text());}
);
看来我来晚了一点。
试试这个。
<div id="text"><!-- 文本 --></div>
init()
function init()
{
addListeners();
adjustText(document.getElementById("text"));
}
function addListeners()
{
document.body.onclick = clicked;
}
function adjustText(holder)
{
text = holder.innerHTML.split(" ");
holder.innerHTML = "";
for(var i=0;i<text.length;i++)
{
text[i] = text[i].replace("\n", "");
var newText = document.createElement("span");
var leadSpace = document.createTextNode(" ");
var endSpace = document.createTextNode(" ");
newText.innerHTML = text[i];
holder.appendChild(leadSpace);
holder.appendChild(newText);
holder.appendChild(endSpace);
}
}
function clicked(evt)
{
if(evt.target.tagName == "SPAN" && evt.target.innerHTML)
{
alert(evt.target.innerHTML);
}
}