javascript - JQuery toggleClass() 打开然后关闭(或删除)

Question

我正在使用 Angular Directive(指令)来获得页面的左栏和右栏。 <left-column></left-column>和<right-column></right-column> 。当用户单击<a href="#target1">Target 1</a>时然后它找到对应的<div id="target1">Target 1</div>在右列。

效果很好，我现在要做的是在单击特定 div 的背景后应该会闪烁或其他东西，我有一些 css。所以我想切换该 css 类，然后稍后删除该类(或将其关闭)。

我正在尝试使用 setTimeout()功能，但似乎不起作用。有任何想法吗？

我的错误是:

Uncaught TypeError: Cannot read property 'toggleClass' of undefined 

我的js是:

var highlight = {

    onReady: function() {

        $(document).on('click', 'left-column > div', function(event) {

            var id = $('a', this).attr('href').split('#');
            var target = $('right-column > div').find('#' + id[1]);

            target.toggleClass('gas');
            var junk = setTimeout(function(target) {
                target.toggleClass('gas');
            }, 1000);

            event.preventDefault();

        });

    }

};


$(document).ready(highlight.onReady);

Answer 1

您的问题是您期望 target 作为传递给 setTimeout 的回调中的参数，但实际上并未传递任何参数，因此 target setTimeout 回调本地的 隐藏(隐藏)对外部作用域中可用的target 的访问。

从回调参数中删除 target 将修复您的错误:

var junk = setTimeout(function(/* remove target from here */) {
  target.toggleClass('gas');
}, 1000);

或者，如果您愿意，您可以显式传递它，但由于它已经可用，所以它是多余的:

var junk = setTimeout(function(target) {
  target.toggleClass('gas');
}, 1000, target); // <--- you can pass the target along here