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按钮（标识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');

在原型对象jquery上将一个按钮与另一个按钮不同

1 个答案: