jquery scroll()执行多次



我正在使用jQuery在所有a旁边添加一个按钮>在页面上找到SPAN标记。页面本身随着用户向下滚动而增长,这就是我使用滚动功能的原因——我需要不断地将按钮添加到新的页面部分。

下面的代码不断地向已经有按钮的部分添加按钮。我试图在每个找到的标签组合旁边只显示一个按钮。我试过我能想到的每一种组合。我希望有人能给我一个简单的解决方案。

谢谢。

$(window).scroll(function () {
if (!$("a span button").length) {
$("a span").after(
' <button type="button" class="btn btn-secondary btn-sm">BUTTON</button>'
);
}
});
jQuery的.after((插入一个同级元素,而不是子元素。例如,如果你有
<a>
<span>Text</span>
</a>

你的代码的结果将是

<a>
<span>Text</span>
<button>BUTTON</button>
</a>

这与选择器"a span button"不匹配,因为<button>不是<span>的后代。

相反,我会在<span>中添加一些属性或类,以确定它已被按钮化,然后您可以在选择中省略这些元素

$(window).scroll(() => {
$("a span:not(.buttonised)").each((_, span) => {
$(span)
.addClass("buttonised")
.after(
$("<button>", {
class: "btn btn-secondary btn-sm",
text: "BUTTON",
type: "button",
})
);
});
});

最新更新