如何从html onClick事件中将html预处理到页面上的元素中

How to prepend html into on page element from HTML onClick event?

本文关键字：html 元素 onClick 事件 预处理      更新时间：2023-09-26

我正在尝试设置当用户单击特定元素（一个小问号图标）时动态生成"工具提示"弹出窗口的功能。这些工具提示将相对于单击的图标进行绝对定位。由于站点/信息的性质，我决定能够使用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>

如有任何见解或帮助，我们将不胜感激。我还在学习，如果能指出我的错误，我会受益匪浅。

提前感谢！

既然您使用的是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/

您需要将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>
相关文章：