1

我正在寻找有关如何能够单击 html 文档中的单词然后更新页面并显示已单击单词的定义的提示。它可以出现在页面底部。到目前为止，我只是在 p 标签中添加了一个 onclick ，例如。我是否以正确的方式解决这个问题？我在 javascript 方面很糟糕，所以对此的任何帮助都会很棒。非常感谢

      <p id="complexword1" onclick="functionToDisplayComplexWord()">
4

3 回答 3

3

我认为它可能会帮助您解决问题。

HTML：

<body>
<p id="paragraph">Javascript/Jquery onclick definition of word appears?</p>
</body>

Javascript：（Jquery 库）

var p = $('p#paragraph');

p.html(function(index, oldHtml) {
    return oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>')
});

p.click(function(event) { 
    if(this.id != event.target.id) {
        alert(event.target.innerHTML);
    }
});

演示

于 2012-05-15T08:10:38.263 回答
1

一种解决方案可能是使用 javascript 的事件委托

将 click 事件处理程序分配给段落元素，并使用 event.target 获取事件的目标

需要每个单词的虚拟跨度，因为 event.target 不会在主要浏览器中返回文本节点。因此，您需要设置虚拟跨度。

HTML

<p id='test'> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> </p>

javascript

document.getElementById('test').addEventListener('click', function (event) { console.log(event.target.innerHTML); }, false )

这是一个演示。检查控制台的输出

考虑使用attachEvent并event.srcElement支持 IE

另一种解决方案可能基于文本选择。

您可以使用此代码在浏览器中获取选定的文本

于 2012-05-15T08:14:52.337 回答
0

您想在同一页面中显示还是作为弹出窗口显示？如果你想使用弹出窗口，Colorbox是一个很好的 jQuery 插件。

如果你想自己做，只需在你的页面内创建一个隐藏的 div 并设置为显示在functionToDisplayComplexWord()

于 2012-05-15T08:03:53.680 回答