javascript - jQuery 'if' 语句不起作用

Question

这应该是一个简单的 if 语句，但它对我不起作用。本质上，当您单击某个元素时，我希望该元素突出显示，并将 ID 放入变量 value 中。但是，如果在这种情况下同一元素被单击两次，我想要 value = NULL。

(function($){ 
  $(".list").click(function() {
     $(this).toggleClass("hilite");
     var temp = $(this).attr('id');
     if (value != temp) {
        var value = $(this).attr('id');
     } else {
        value = NULL;
     }
  });
})(jQuery);

Answer 1

您的主要问题是您通过使用 var 关键字重新定义值变量来“提升”它。还可以使用更少的代码更有效地编写此代码。这应该有效:

(function($) { 
    // somewhere outside click handler
    var value = '';
    // click handler
    $(".list").click(function() {
        var id = $(this).toggleClass('hilite').attr('id');
        value = (value === id) ? null : id;

        /* or if you prefer an actual if/else... 
        if (value === id) {
            value = null;
        else {
            value = id;
        }
        */
    });
})(jQuery); 

<小时/> 编辑:关于可能有用的原始代码片段的一些一般性评论:

• NULL 应为 null
• 尽量不要多次运行同一个选择器，或者多次从同一个 DOM 对象重新创建 jQuery 对象 - 简单地将结果缓存到变量(例如， var $this = $(this);)
• 您的比较可能是“安全”的，但最好使用 !== 而不是 != 以避免无意的类型强制。
• 不确定您到底打算如何在原始示例中使用 value，但请始终记住变量在 JavaScript 中具有函数作用域，因此您的 var value 语句正在提升整个函数的 value 标识符，这意味着您的分配不会影响该点击处理程序之外的任何内容。