gpt4 book ai didi

jquery - 允许 jQuery 函数应用于多个标签

转载 作者:行者123 更新时间:2023-11-28 05:25:12 24 4
gpt4 key购买 nike

我使用下面的小 jQuery 代码;

<script>
$(document).ready(function() {
$('#download-btn').click(function() {
$("#download-btn").html('<span class="glyphicon glyphicon-saved" aria-hidden="true"></span> Downloaded');
$("#download-btn").last().addClass("disabled");
})
});
</script>

它按预期工作 - 当我单击 ID 为 #download-button 的按钮时,它会添加一个新类,并替换一些 html/文本。现在,这似乎只适用于一个按钮,最上面的那个。看起来像这样;

enter image description here

两个按钮完全一样,

<button id="download-btn" type="button" class="center btn btn-primary">
<span class="glyphicon glyphicon-save" aria-hidden="true"></span> Download</button>

我希望 jQuery 仅应用于被点击的对象,但 任何 具有 id #download-btn 的被点击对象,而不仅仅是最上面的那个。如果不给每个下载按钮一个单独的唯一 ID 并重复 jQuery 函数,我似乎无法弄清楚如何做到这一点 - 我希望有更好的解决方案。

最佳答案

这里有两件事你应该做

  1. 在您想要应用相同行为的所有按钮上使用一个类 - ID 应该是唯一的
  2. 在处理程序中使用 $(this) 以便操作仅应用于 clicked 按钮(您也可以将这两个操作链接在一起)

html:

<button class="download-btn" type="button" class="center btn btn-primary">
<span class="glyphicon glyphicon-save" aria-hidden="true"></span> Download</button>

jQuery:

$('.download-btn').click(function() {
$(this).html('<span class="glyphicon glyphicon-saved" aria-hidden="true"></span> Downloaded')
.addClass("disabled");
})

但是,这里也有进一步的改进 - 您不需要完全替换 html - 相反,您可以只在内部跨度内切换类。

$('.download-btn').click(function() {
$(this).addClass("disabled")
.find("span.glyphicon").removeClass("glyphicon-save")
.addClass("glyphicon-saved");
})

上面需要一些额外的工作来改变按钮的文本,如果你决定走这条路,我会把它留给你(提示:将文本放在另一个 span 元素中!)

关于jquery - 允许 jQuery 函数应用于多个标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33434905/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com