如何在HTML onClick事件中將html放在頁面元素之前？

Question

我嘗試設置當用戶單擊特定元素（一個小問號圖標）時動態生成“工具提示”彈出窗口的功能。 這些工具提示將相對於單擊的圖標絕對定位。 由於網站/信息的性質，我決定我希望能夠使用html中的onClick事件調用javascript函數，然后向其傳遞一些參數。

但是，我對這種開發是陌生的，並且在使它起作用時遇到了一些問題。 我已經將所有的html和css放置在適當的位置並設置了樣式，但是“單擊時”沒有任何反應。 我沒有收到任何控制台錯誤，但似乎並沒有正確放置html，這超出了我的能力，無法確定原因。

這是我編寫的代碼。

Javascript / jQuery：

function createTooltip(h4, p) {
    $(this).next('.dialog-anchor').prepend('<div class="dialog-container"><div class="tooltip-dialog"><h4>'+h4+'</h4><p>'+p+'</p></div><div class="bg"></div></div>');
};

HTML：

<a class="tooltip" onClick="createTooltip('Test Tooltip', 'blah blah blah blah blah blah blah blah blah')"><div class="dialog-anchor"></div></a>

任何見識或幫助將不勝感激。 我仍在學習，指出錯誤會從中受益很多。

提前致謝！

Answer 1

您需要this作為參數傳遞給函數。 HTML屬性應為：

onClick="createTooltip(this, 'Test Tooltip', 'blah blah blah blah blah blah blah blah blah')"

jQuery應該使用.find()而不是.next() ，因為.dialog-anchor元素位於錨內部，而不是錨之后。

function createTooltip(elem, h4, p) {
    $(elem).find('.dialog-anchor').prepend('<div class="dialog-container"><div class="tooltip-dialog"><h4>'+h4+'</h4><p>'+p+'</p></div><div class="bg"></div></div>');
}

演示

如果HTML如下所示，您將使用.next() ：

<a>something</a><div class="dialog-anchor"></div>

Answer 2

由於您使用的是jQuery，如何利用它的偵聽器並添加html數據屬性？

<a class="tooltip" data-h4="Test Tooltip" data-p="blah blah blah blah blah blah blah blah blah">
    <div class="dialog-anchor">ANCHOR</div>
</a>

還有一件錯誤的事情： $(this).next('.dialog-anchor') - $(this).next('.dialog-anchor') .dialog-anchor是.tooltip的子.tooltip 。 next()是兄弟姐妹而不是孩子時使用。 使用find代替。

$(function () { //jquery document.ready
    $('a.tooltip').on('click', function (e) {
        var $this = $(this);
        e.preventDefault();

        //dialog-anchor is a child of tooltip. NEXT is used when it's siblings
        $this.find('.dialog-anchor').prepend('<div class="dialog-container"><div class="tooltip-dialog"><h4>' + $this.data('h4') + '</h4><p>' + $this.data('h4') + '</p></div><div class="bg"></div></div>');
    });
});

http://jsfiddle.net/dg1t4f8c/3/