Question

我正在处理某种类型的简单通知系统。

这是jsfiddle：https://jsfiddle.net/t9pvmzhh/3/

我不知道为什么，但jsfiddle不会显示所有4个通知，尽管它在我的页面上运行正常。我可能做错了什么，你也可以帮我纠正jsfiddle代码...

我已经开始在1000ms之后清除每个通知，但是在JS代码结束时卡住了。＆＃34; id＆＃34; var返回clear0（），clear1（），正如预期的那样，但现在我必须调用一个函数并且function id { }不起作用。这甚至可能吗？我可以调用这样的函数，或者我需要找到另一种解决方法（我可能会添加一个X来关闭通知，但自动关闭会更好）

HTML

<div class="notificontainer" id="notificontainer">
</div>

CSS

.notificontainer {
      position: fixed;
      border: 1px solid blue;
      width: 40vw;
      height: 20px;
      left: 30%;
      bottom: 10px;
    }

    .notification {
      display: none;
      transition: visibility .5s;
      position: absolute;
      border: 1px solid #44DDFF;
      background-color: rgb(0, 0, 0);
      width: 50%;
      height: auto;
      padding: 0;
      left: 25%;
      bottom: 0px;
      color: #ffffff;
    }

    .tooltipheader {
        margin: 0px;
        padding: 2%;
        text-align: center;
        border-bottom: 1px groove #949494;
        background-color: rgba(165,165,175, .1);
    }

JS

notification("Hi world1");
notification("Hi world2");
notification("Hi world3");
notification("Hi world4");

var counted = 0;

function notification(what) {
  counted++;
  var elem = document.getElementById("notificontainer");

  elem.innerHTML += "<div class=\"notification\" id=\"noty" + counted + "\"><div class=\"tooltipheader\"" + what + "</div></div>";
  document.getElementById("noty" + counted).style.bottom = counted * 40 + "px";
  document.getElementById("noty" + counted).style.display = "initial";

  var id = "clear" + counted + "()";

  window.setTimeout("clear" + counted, 1000);
}

Answer 1

您可以将参数传递给setTimeOut()'s函数回调。 How can I pass a parameter to a setTimeout() callback?

setTimeout(function(param){
    console.log("noty"+param);
    document.getElementById("noty" + param).style.display = "none";
}.bind(null,counted), 3000);

Answer 2

更新小提琴：

https://jsfiddle.net/t9pvmzhh/5/

function clear(id) {
    document.getElementById("noty"+id).parentElement.removeChild(document.getElementById("noty"+id));
}

基本上，你还没有定义清除功能，所以呼叫没有成功。

另外，去除＆＃34;删除＆＃34;一个带有纯js的项目，你不能直接删除该项目，只有他的父母可以：

正如詹姆斯所说，DOM不支持直接删除对象。你必须去它的父母并从那里删除它。 Javascript不会让一个元素自杀，但它确实允许杀婴...... - Mark Henderson 8月1日和10日23:36

Remove element by id

尝试始终使用打开的调试窗口，以便检查此类内容。

在给定的时间范围javascript之后清除每个通知

2 个答案: