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

Posted

技术标签:

【中文标题】Jquery:如何自动将 window.location.hash 应用为与按钮 ID 相同的数字?【英文标题】:Jquery: How to apply window.location.hash as same number as in button id automatically? 【发布时间】:2019-02-07 08:42:38 【问题描述】:

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

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

$(".button2").click( function() 
ajaxFunction(gallery[2]);    
);

$(".button3").click( function() 
ajaxFunction(gallery[3]);

);

等等等等

我需要找出一种方法,当我们说#button2 被点击时,它会自动应用:window.location.hash = '#gallery2'。如果点击#button3,它将添加window.location.hash = '#gallery3'等。

有几百个按钮,所以我尽量避免在这里手动输入哈哈。

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

希望我已经解释清楚了。

谢谢

【问题讨论】:

/\d+/ 这样的简单正则表达式模式可能有效吗?比如:this.id.match(/\d+/)[0] 【参考方案1】:

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

类似:

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

编辑:从您的 cmets 看来,您有答案。您只需将其应用于所有按钮,而无需添加数百个点击处理程序:)

为此,您需要查看event delegation。 jQuery 通过他们的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 的on documentation

【讨论】:

嗨,杰克,我实际上也进行了类似的调整,$(".button2").click( function() var idnum = $(this).attr("id").match(/\d+$/); window.location.hash = ('#gallery' + idnum); 但这需要手动输入每个按钮。有没有办法将它应用到每个类名中有数字的按钮上? 有,@DC1 - 你正在寻找event delegation。我会适当调整我的答案! 嗨,杰克,因为我没有使用实际的“按钮”标签(我使用了归类为 .button1 等的 div),所以我必须将其设置为点击“.container”中的任何 div这是最终的工作代码,感谢您的方法! $(".container").on('click', 'div', function() var idnum = $(this).attr("id").match(/\d+$/); window.location.hash = ('#gallery' + idnum); );感谢您的帮助!【参考方案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

【讨论】:

【参考方案3】:

如果您可以在每个按钮上添加一个数据属性来指示画廊,那会让事情变得干净整洁。如果你不能做到这一点,你仍然可以到达那里,但它会有点混乱。

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

&lt;button-selector&gt; 是一个选择器,可以选择所有按钮。

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

这个正则表达式首先匹配一个文字字符串button。然后它将捕获匹配(用括号表示)一个或多个(表示为+数字(表示为@ 987654326@)。从match 返回的第二个数组元素是匹配的捕获部分。在这种情况下,第二个参数将是buttonbutton 之后的数字。

如果您可以添加一个数据属性(例如&lt;button data-gallery="76"&gt;Gallery 76&lt;/button&gt;),您可以这样做:

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

【讨论】:

以上是关于Jquery:如何自动将 window.location.hash 应用为与按钮 ID 相同的数字?的主要内容,如果未能解决你的问题,请参考以下文章

window.location.hash

window.location 的各个参数

如何将 HTML 中的滑动检测转换添加到我的应用程序中?

如何将 jquery 自动完成附加到输入元素

JavaScript - 如果 URL 没有#hash? [复制]

如何将 JSON 对象内的 JSON 数组传递给 jQuery 自动完成