2

フォーラムの bbcode をいじっていて、複数のネストされた引用符に関する問題に遭遇しました。マウスオーバー時に画像ツールチップを実装しようとしています。

<a href="javascript:void;" onmouseover="tooltip.show(\'<img src=\1.jpg>\', 200);" onmouseout="tooltip.hide();">\1</a>',

( \1はユーザーが [img][/img] タグの間に入力する値です。)

ご覧のとおり、img src を引用符で囲んでいません。ネストされた引用符を使用して、これを示す正しい構文は何ですか? バックスラッシュ ( \\" など) を使用しようとしましたが、うまくいきません。

何か案は？

4

2 に答える 2

4

HTML にインラインでイベント リスナーを追加するのをやめれば、見積もり (およびその他の多く) の問題はすべて解消されます。

HTML はテキストおよびマルチメディア データを表すためのものであり、インライン CSS および JavaScript を含めることはできません。

最初のステップとして、すべての JavaScript が別々のファイルになるようにコードを再編成できます。

HTML の場合:

<a class="bbcode-link" data-src="\1">\1</a>

<script src="script.js"></script>

でscript.js：

function showTooltip(e) {
    var filename = e.target.getAttribute('data-src')
    return tooltip.show('<img src="' + filename + '.jpg" />', 200)
}

function hideTooltip() {
    return tooltip.hide()
}

[].forEach.call(
    document.querySelectorAll('a.bbcode-link'),
    function (link) {
        link.addEventListener('mouseover', showTooltip, false)
        link.addEventListener('mouseout', hideTooltip, false)
    }
)

また、ユーザー入力を HTML に挿入する前にサニタイズしていただきたいと思います。

参照リンク:

于 2012-01-01T22:01:41.600 に答える
1

これは機能するはずです。

<a href="javascript:void;" 
onmouseover="tooltip.show('<img src=&quot;\1.jpg&quot;>', 200);"
onmouseout="tooltip.hide();">\1</a>',

&quot;ブラウザが引用符を属性値の区切り文字に解析しないようにするために、どのように使用したかを注意深く確認してください。'また、属性値内の文字をエスケープする必要はありません。

jsfiddle

于 2012-01-01T21:23:06.087 に答える