Jquery: 如何自动将window.location.hash 应用为与按钮ID 相同的数字?
Jquery: How to apply window.location.hash as same number as in button id automatically?
我的网页至少有 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]'
希望我已经解释清楚了。
谢谢
这意味着修改您的 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;
});
您可以在 'button' 上开始计算字符数和拆分字符串,但这有点老套,这种方法是从 DOM.[=13 中存储和提取任意值的常用方法=]
如果您可以在每个按钮上添加一个数据属性来指示画廊,那会让事情变得漂亮和干净。如果你做不到,你仍然可以做到,但会有点乱。
$('<button-selector>').click(function() {
var buttonClasses = this.classList.value;
var galleryNumber = buttonClasses.match(/button(\d+)/)[1];
window.location.hash = '#gallery' + galleryNumber;
});
其中 <button-selector>
是一些 select 或者 select 你所有的按钮。
我在这里使用的正则表达式的快速解释。 .match()
是一种字符串方法,它针对字符串运行正则表达式,returns 是有关匹配信息的数组。我传递给它的参数是正则表达式(用正斜杠包围)。
这个正则表达式首先匹配一个文字字符串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;
});
像 /\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
处理程序来监听所有从它的 children 开始的 bubble
的点击。有时人们会做这样的事情:
$('body').on('click', '.selector', handler);
不过一般来说,您会希望处理程序绑定得尽可能靠近您的按钮。
事件委托的一个主要优点是,如果您有 1000 个按钮都需要响应,那么您只需绑定一个侦听器,而不是为每个按钮绑定一千个侦听器。它也只是需要修改的一行脚本,而不是 1000 行代码:)
希望对您有所帮助!
jQuery的on documentation
我的网页至少有 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]'
希望我已经解释清楚了。
谢谢
这意味着修改您的 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;
});
您可以在 'button' 上开始计算字符数和拆分字符串,但这有点老套,这种方法是从 DOM.[=13 中存储和提取任意值的常用方法=]
如果您可以在每个按钮上添加一个数据属性来指示画廊,那会让事情变得漂亮和干净。如果你做不到,你仍然可以做到,但会有点乱。
$('<button-selector>').click(function() {
var buttonClasses = this.classList.value;
var galleryNumber = buttonClasses.match(/button(\d+)/)[1];
window.location.hash = '#gallery' + galleryNumber;
});
其中 <button-selector>
是一些 select 或者 select 你所有的按钮。
我在这里使用的正则表达式的快速解释。 .match()
是一种字符串方法,它针对字符串运行正则表达式,returns 是有关匹配信息的数组。我传递给它的参数是正则表达式(用正斜杠包围)。
这个正则表达式首先匹配一个文字字符串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;
});
像 /\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
处理程序来监听所有从它的 children 开始的 bubble
的点击。有时人们会做这样的事情:
$('body').on('click', '.selector', handler);
不过一般来说,您会希望处理程序绑定得尽可能靠近您的按钮。
事件委托的一个主要优点是,如果您有 1000 个按钮都需要响应,那么您只需绑定一个侦听器,而不是为每个按钮绑定一千个侦听器。它也只是需要修改的一行脚本,而不是 1000 行代码:)
希望对您有所帮助!
jQuery的on documentation