将原型对象上的一个按钮与另一个按钮区分开来 jquery

Question

首先，原型：

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();
    }); 

};

所以，原型是使用 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')

正在创建一个新的 "dismiss button"，它与之前的 "dismiss buttons"（如果有）具有相同的 ID (dismissButton)。

另一件事是每次你运行

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

您指示 只有第一个 "dismiss button" 在单击时删除由 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');

将原型对象上的一个按钮与另一个按钮区分开来 jquery

Differing one button from another on a prototype object jquery

javascript

button