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 lib)

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

これに対する 1 つの解決策は、javascript を使用したイベント委任である可能性があります

クリック イベント ハンドラーを段落要素に割り当て、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 )

これがデモです。コンソールの出力を確認してください

attachEventIE の使用を検討し、 event.srcElementIE をサポートする

別の解決策は、テキストの選択に基づく場合があります。

このコードを使用して、ブラウザで選択したテキストを取得できます

于 2012-05-15T08:14:52.337 に答える
0

同じページに表示しますか、それともポップアップとして表示しますか？ポップアップの使用を検討している場合、ColorboxはjQueryの優れたプラグインです。

自分でそれを行いたい場合は、ページ内に非表示のdivを作成し、ページに表示するように設定します。functionToDisplayComplexWord()

于 2012-05-15T08:03:53.680 に答える