Question

我确信这很简单，我希望是这样。经过几天的努力，我终于把我的最后一个问题归好了，谢谢你这里有人，但现在我遇到了一个新问题。我正在动态创建数百个博客。我正在使用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函数。

有人可以帮忙吗？有一种简单的方法吗？

Answer 1

......许多具有相同身份的元素......

这就是问题，你不能有多个具有相同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仍然是“编辑”链接。

Answer 2

根据HTML标准使用class而不是id，每个元素都应该有唯一的id。

id ：此属性为元素指定名称。该名称在文档中必须是唯一的。

class ：此属性为一个类名或一组类名指定   元件。可以为任意数量的元素分配相同的类名或   名。多个类名必须用空格分隔   字符。

http://www.w3.org/TR/html401/struct/global.html

所以使用class而不是id

<a class="blog_btns edit" data-id="$b_blog_id" href="">Edit</a>

并使用$('.edit')

引用它

在具有相同id的许多元素上运行相同的JQuery函数

2 个答案: