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

问题描述 投票:2回答:3

我有一个至少有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]'

希望我已经清楚地解释了这一点。

谢谢

jquery hash automation window.location
3个回答
1
投票

一个简单的正则表达式模式,如/ \ d + /可以工作。

就像是:

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

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

为此,你需要调查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


1
投票

这意味着修改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;
});

你可以开始计算字符并在'按钮'上分割字符串,但它有点hacky,这种方法是从DOM存储和提取任意值的常用方法。

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


1
投票

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

$('<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返回的第二个数组元素是匹配的捕获部分。在这种情况下,第二个参数将是buttonclassList之后的数字。

如果你可以改为添加数据属性(比如<button data-gallery="76">Gallery 76</button>),你可以这样做:

$('<button-selector>').click(function() {
  var galleryNumber = this.dataset.gallery;
  window.location.hash = '#gallery' + galleryNumber;
});
© www.soinside.com 2019 - 2024. All rights reserved.