在多个具有相同id的元素上运行相同的JQuery函数
在多个具有相同id的元素上运行相同的JQuery函数
提问于 2014-01-01 06:04:28
我相信这会很简单，我希望是这样。在绞尽脑汁几天后，我终于解决了我的最后一个问题，谢谢你在这里找个人，但现在我有了一个新的问题。我动态地创建了数以百计的博客。我使用JQuery将编辑器加载到一个简单的模态窗口中，如下所示
<a class="blog_btns" id="edit" data-id="$b_blog_id" href="">Edit</a>然后是JQuery
jQuery(function($) {
var contact = {
message: null,
init: function() {
$('#edit').each(function() {
$(this).click(function(e) {
e.preventDefault();
// load the contact form using ajax
var blogid = $(this).data('id');
$.get("../_Includes/edit.php?blogid=" + blogid, function(data) {
// create a modal dialog with the data
$(data).modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["15%", ],
overlayId: 'contact-overlay',
containerId: 'contact-container',
onOpen: contact.open,
onShow: contact.show,
onClose: contact.close
});
});
});
});
},
open: function(dialog) {
dialog.overlay.fadeIn(200, function() {
dialog.container.fadeIn(200, function() {
dialog.data.fadeIn(200, function() {
$('#contact-container').animate({
height: h
}, function() {
$('#contact-container form').fadeIn(200, function() {
});
});
});
});
});
},
show: function(dialog) {
//to be filled in later
},
close: function(dialog) {
dialog.overlay.fadeOut(200, function() {
$.modal.close();
});
},
};
contact.init();
});我的问题是我有几百个
<a class="blog_btns" id="edit" data-id="$b_blog_id" href="">Edit</a>但是我希望all运行上面相同的jQuery函数。
有人能帮忙吗？有什么简单的方法吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-01-01 06:08:06
具有相同id的...many元素..。
这就是问题所在，您不能使用同一个id拥有多个元素。
您可能想使用一个类：
<a class="blog_btns edit" data-id="$b_blog_id" href="">Edit</a>
<!-- Added ---------^ -->然后：
$('.edit').each(...);
// ^---- ., not #, for class但您可能不想使用each，只需：
$('.edit').click(function(e) {
// ...
});没有必要单独地遍历它们。
您可能考虑的另一种方法是，不要将每个单独的“编辑”链接挂钩，而是使用事件委托。这样，您就可以将事件挂在包含所有这些“编辑”链接的元素上(肯定有一个合理的链接，body总是可以作为最后手段)，但是告诉jQuery不要通知您事件，除非它在冒泡的过程中通过其中一个链接到该元素。看起来是这样的：
$("selector for the container").on("click", ".edit", function(e) {
// ...
});在处理程序中，this仍然是“编辑”链接。
Stack Overflow用户
发布于 2014-01-01 06:11:11
按照HTML标准，使用类而不是id，每个元素都应该有一个唯一的id。
id:此属性为元素分配名称。此名称在文档中必须是唯一的。 类:该属性为元素分配一个类名或一组类名。可以为任意数量的元素分配相同的类名。多个类名必须用空格字符分隔。
http://www.w3.org/TR/html401/struct/global.html
所以使用类而不是id
<a class="blog_btns edit" data-id="$b_blog_id" href="">Edit</a>并与$('.edit')一起参考
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20869411
复制相关文章
相似问题
腾讯云开发者
