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

Question

我使用下面的小 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/文本。现在，这似乎只适用于一个按钮，最上面的那个。看起来像这样；

两个按钮完全一样，

<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 函数，我似乎无法弄清楚如何做到这一点 - 我希望有更好的解决方案。

Answer 1

这里有两件事你应该做

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 元素中!)