Question

我正在尝试设置动态生成＆＃34;工具提示＆＃34;当用户点击特定元素（一个小问号图标）时弹出窗口。这些工具提示相对于单击的图标绝对定位。由于网站/信息的性质，我决定使用html中的onClick事件来调用javascript函数，然后传递一些参数。

然而，我是这种发展的新手，我在解决这个问题时遇到了一些问题。我有所有的html和css到位并且设计得恰到好处但没有任何反应＆＃34;在Click＆＃34;上。我没有收到任何控制台错误，但似乎没有正确显示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>');
}

DEMO

如果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') - .dialog-anchor是.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/

如何在HTML onClick事件中将html添加到页面元素中？

2 个答案: