javascript - 在原型(prototype)对象jquery上将一个按钮与另一个按钮区分开来

Question

首先是原型(prototype):

function Notification (title, message, id) {
    var $title = this.title = title;
    var $message = this.message = message;
    var $id = this.id = title;


    /* ---------------creating HTML prototype */
    var $mainDiv = $("<div></div>").appendTo($("#wrapper"));
    $mainDiv.attr('id', $id);
    $mainDiv.addClass('main-div');
    var $dismissButton = $("<button>X</button>").appendTo($mainDiv);
    $dismissButton.attr('id', 'dismissButton'); 
    var $pTitle = $("<h2></h2>").appendTo($mainDiv);
    $pTitle.attr('id', 'title');
    $pTitle.text($title);
    var $para = $("<p></p>").appendTo($mainDiv);
    $para.attr('id', 'message');
    $para.text($message); 
    var $ul = $("<ul></ul>").appendTo($mainDiv);
    var $li1 = $("<li></li>").appendTo($ul);
    $li1.attr('id', 'okButton'); 
    var $button = $("<button>Ok</button>").appendTo($li1);
    $button.addClass('buttons');

    /* ---------------Dismissing notifications */ 

    $("#dismissButton").click(function() {
        document.getElementById($id).remove();
    }); 

};

因此，原型(prototype)是使用 new Notification(*arguments here*) 制作的，我们得到一个带有通知小部件的框。到目前为止，一切都很好。当我按下 X 按钮 (id dismissbutton) 时，它应该会移除该框，而且确实如此。然而。如果我多次使用 new notification，我会得到几个盒子($mainDiv 有不同的 id)，它们的关闭按钮不起作用。最上面的小部件框的关闭按钮是唯一有效的按钮，它也删除了所有其他框。

我需要将它们分开，并让关闭按钮分别对每个框起作用。

提前致谢:)

Answer 1

这里的问题是您正在创建具有相同 ID 的多个元素(顺便说一句，这是无效的 HTML)。

每次运行

var $dismissButton = $("<button>X</button>").appendTo($mainDiv);
        $dismissButton.attr('id', 'dismissButton')

正在创建一个新的“关闭按钮”，它与之前的“关闭按钮”(如果有)具有相同的 ID (dismissButton)。

另一件事是每次你运行

$("#dismissButton").click(function() {
          document.getElementById($id).remove();
    });

您指示仅第一个“关闭按钮”在单击时删除由 ID $id 标识的元素。

在我看来，解决此问题的最佳方法是使用对元素本身的引用而不是 ID。

所以我会像这样创建关闭按钮；

var $dismissButton = $("<button>X</button>").appendTo($mainDiv);

然后这样判断它的点击回调

$dismissButton.on('click', function () {
    $mainDiv.remove();
});

这应该适合你。

最后但同样重要的是，我会避免为任何元素提供相同的 ID，因为它会产生无效的 HTML 代码。您在以下几行中这样做

• $dismissButton.attr('id', 'dismissButton');
• $pTitle.attr('id', 'title');
• $para.attr('id', 'message');
• $li1.attr('id', 'okButton');