Question

我正在尝试将一小段jQuery转换为vanilla JS，而我似乎无法让计时器在.addEventListener内工作。

我不确定他们是否能像这样工作。

我已将我的工作上传到Plunkr，JS中的灰色代码是Vanilla JS。

https://embed.plnkr.co/up5i33T4LfTmpXhy86wM/

除了延迟之外，一切都有效，它会延迟延迟，好像它不存在一样。

这是jQuery版本，效果很好：

//jQuery VERSION
$("span").click(function (e) {
    $(this).parent().fadeOut(500, function(){
        $(this).remove();
    });
    e.stopPropagation();
});

这是我的香草尝试：

//JavaScript Version - DOESNT WORK!!!
var spans = document.querySelectorAll("span");

for (var i = 0; i < spans.length; i++) {
    spans[i].addEventListener("click", function () {
        this.parentElement.classList.add("fadeOut");
        setInterval(test(this), 2000);

    });
}

function test(event){
    console.log(event);
    event.parentElement.outerHTML = "";
};

香草的CSS是：

/* STYLES FOR JS */
.fadeOut{
    opacity: 0;
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
}

并且被操纵的HTML非常简单：

<div id="container">
       <h1>TO-DO LIST</h1>
       <input type="text">
       <ul>
           <li><span>X</span> Go to Potions Class</li>
           <li><span>X</span> Buy New Robes</li>
           <li><span>X</span> Visit Hagrid</li>
       </ul>

   </div>

Answer 1

我要感谢@ powerbuoy，@ tryzniak和@Kavian K.

我使用了你所有的答案，并将以下内容巧妙地结合起来：

var spans = document.querySelectorAll（＆＃34; span＆＃34;）;

for (var i = 0; i < spans.length; i++) {
    spans[i].addEventListener("click", function () {
        var _this = this;
        _this.parentElement.classList.add("fadeOut");
        setTimeout(function () {
            _this.parentElement.outerHTML = "";
        }, 500);

    });
}

我使用了@tryzniak并使用@Kavian K.的元素将其转换为ES5。建议并切换setInterval，这给了我setTimeout问题解决了问题。

谢谢你们，现在工作顺利！

Answer 2

根据@ powerbuoy的建议，这是一个有效的解决方案：

var spans = document.querySelectorAll("span");

for (var i = 0; i < spans.length; i++) {
    spans[i].addEventListener("click", function () {
        this.parentElement.classList.add("fadeOut");
        setTimeout(() => this.parentElement.outerHTML = "", 9000);

    });
}

Answer 3

检查以下代码段：

＆＃13;

var spans = document.querySelectorAll("span");

for (var i = 0; i < spans.length; i++) {
    spans[i].addEventListener( 'click', function () {
        var elem = this.parentElement;
        elem.classList.add( 'fadeOut' );
        setTimeout( function () { elem.parentElement.removeChild( elem ) }, 600)
    });
}

＆＃13;

.fadeOut {
    opacity: 0;
    transition: all 0.6s;
    -webkit-transition: all 0.6s
}

＆＃13;

<div id="container">
    <h1>TO-DO LIST</h1>
    <input type="text">
    <ul>
        <li><span>X</span> Go to Potions Class</li>
        <li><span>X</span> Buy New Robes</li>
        <li><span>X</span> Visit Hagrid</li>
    </ul>
</div>

＆＃13;

但是您不需要使用计时器来隐藏<li>元素。只需在您的CSS中添加height: 0：

＆＃13;

var spans = document.querySelectorAll("span");

for (var i = 0; i < spans.length; i++) {
  spans[i].addEventListener( 'click', function () {
    this.parentElement.classList.add( 'fadeOut' );
  });
}

＆＃13;

.fadeOut{
  height: 0;
  opacity: 0;
  transition: all 0.6s;
  -webkit-transition: all 0.6s
}

＆＃13;

<div id="container">
    <h1>TO-DO LIST</h1>
    <input type="text">
    <ul>
        <li><span>X</span> Go to Potions Class</li>
        <li><span>X</span> Buy New Robes</li>
        <li><span>X</span> Visit Hagrid</li>
    </ul>
</div>

＆＃13;

.addEventListener中的计时器不起作用？

3 个答案: