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

Differing one button from another on a prototype object jquery

本文关键字：按钮 一个 另一个 对象 原型 jquery      更新时间：2023-09-26

首先，原型：

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），它们的关闭按钮不起作用。最上面的小部件框的关闭按钮是唯一有效的按钮，它也删除了所有其他框。

我需要将它们分开，并让关闭按钮分别适用于每个盒子。

提前致谢:)

这里的问题是您正在创建具有相同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');
相关文章：