Jquery:如何自动应用window.location.hash作为与按钮ID相同的数字?

Question

我有一个至少有300个按钮的网页。

这是我针对这个问题的按钮的精简版本。

$(".button2").click( function() {
ajaxFunction(gallery[2]);    
});
$(".button3").click( function() {
ajaxFunction(gallery[3]);
});

等等等等

我需要找出一种方法，当假设单击 #button2 时，它将自动应用：window.location.hash = '#gallery2'。如果单击 #button3，它将添加window.location.hash = '#gallery3'，等等。

有几百个按钮，所以我试图避免在这里手动输入，哈哈。

有没有办法抓取"#button[数字]"末尾的数字并将其添加到 window.location.hash = '#gallery[该数字]'

希望我已经解释清楚了。

谢谢

Answer 1

像/\d+/这样的简单正则表达式模式可以工作。

像这样：

$(".button2").click( function() {
ajaxFunction('#gallery' + this.id.match(/d+/)[0]);    
});

编辑：从您的评论中，您似乎有答案。您只需要将其应用于所有按钮，而无需添加数百个单击处理程序:)

为此，您需要研究event delegationjQuery通过其on方法轻松提供此功能。例如：

<div class="container">
<button class="button1">...</button>
<button class="button2">...</button>
<button class="button3">...</button>
<button class="button4">...</button>
<button class="button5">...</button>
</div>
<script>
$('.container').on('click', 'button', function () {
var $btn = $(this);
var className = $btn.attr('class'); // or Id
var idNum = className.match(/d+/)[0];
ajaxFunction('#gallery' + idNum);
});
</script>

类似这样的东西将允许您拥有一个click处理程序，该处理程序将侦听从其子级bubble的所有点击。有时人们会做这样的事情：

$('body').on('click', '.selector', handler);

但通常，您希望处理程序绑定到尽可能靠近按钮的位置。

事件委派的一个主要优点是，如果您有 1000 个都需要响应的按钮，则只绑定一个侦听器，而不是每个按钮绑定一千个侦听器。它也只是需要修改的一行脚本，而不是 1000 行代码:)

希望对您有所帮助！

jQuery's on documentation

Answer 2

这意味着修改你的HTML，但我建议使用数据属性：

<input class="myGalleryBtn" value="Clicky" type="button" data-id="3" />

单击按钮时，您将选取此属性：

$(".myGalleryBtn").click(function(){
var galleryid = $(this).attr("data-id");
window.location.hash = "#gallery" + galleryid;
});

您可以开始计算字符并在"按钮"上拆分字符串，但这有点笨拙，这种方法是从 DOM 存储和拾取任意值的常用方法。

https://api.jquery.com/data/#data-html5

Answer 3

如果您可以在每个按钮上添加一个数据属性来指示图库，那将使事情变得漂亮和干净。如果你做不到，你仍然可以到达那里，但它会有点混乱。

$('<button-selector>').click(function() {
var buttonClasses = this.classList.value;
var galleryNumber = buttonClasses.match(/button(d+)/)[1];
window.location.hash = '#gallery' + galleryNumber;
});

其中<button-selector>是一些选择器，它将选择您的所有按钮。

我在这里使用的正则表达式的快速解释。.match()是一个字符串方法，它对字符串运行正则表达式并返回有关匹配项的信息数组。我传递给它的参数是正则表达式(用正斜杠包围(。

此正则表达式首先匹配文本字符串button。然后，它将捕获一个或多个(用+表示(数字(用d表示(的匹配项(用括号表示(。从match返回的第二个数组元素是匹配项的捕获部分。在这种情况下，第二个参数将是classList中button后面的数字。

如果可以添加数据属性(如<button data-gallery="76">Gallery 76</button>(，则可以执行以下操作：

$('<button-selector>').click(function() {
var galleryNumber = this.dataset.gallery;
window.location.hash = '#gallery' + galleryNumber;
});