Jquery If/Else 始终计算为真

Question

遇到 if/else 的小麻烦似乎总是如此

<a id="test" class="art-bottom detailvid" href="/redblank" target="_blank">Check-In Video</a>

$(document).ready(function() {      
    if ($('a[href="/blank"]')) {
       $( "a" ).append( '<img src="http://www.clipartbest.com/cliparts/Kcn/MGE/KcnMGEd9i.png" height="28px" width="28px">' );
    } else {
      $( "a" ).append( '<img src="http://www.clipartbest.com/cliparts/McL/L7p/McLL7pkKi.png" height="28px" width="28px">' );
    }    
});

所以，无论我做什么href它仍然显示第一张照片。

问题是什么？

Answer 1

您应该检查 if 语句中返回对象的长度。您还应该将 if 语句中使用的 attr href 的值更改为 "/redblank":

if ($('a[href="/redblank"]').length) {
   $( "a" ).append( '<img src="http://www.clipartbest.com/cliparts/Kcn/MGE/KcnMGEd9i.png" height="28px" width="28px">' );
} else {
  $( "a" ).append( '<img src="http://www.clipartbest.com/cliparts/McL/L7p/McLL7pkKi.png" height="28px" width="28px">' );
}

Demo

Answer 2

你可以这样查看条件

if ($('a').attr('href') == "/blank") {
   $( "a" ).append( '<img src="http://www.clipartbest.com/cliparts/Kcn/MGE/KcnMGEd9i.png" height="28px" width="28px">' );
} else {
  $( "a" ).append( '<img src="http://www.clipartbest.com/cliparts/McL/L7p/McLL7pkKi.png" height="28px" width="28px">' );
}

Answer 3

这是一个常见的错误。您需要测试 length，而不是测试元素是否存在，如下所示：

if ($('a[href="/blank"]').length) {...}

您需要熟悉两个概念才能理解其工作原理。

首先是 jQuery 包装集的工作原理。 $('a')，例如：

当您 select 带有 jQuery 的元素时，即使页面上不存在该元素，jQuery 仍会创建 "container"（伪数组），但它将是空的。这可以通过以下方式证明：

打开浏览器控制台并输入var test = $('.doesNotExist')
回车。
在下一行输入 test 并再次按回车键注销该变量。

你会看到：

[]

这是一个空的 jQuery 包装集。该集合存在但为空。您可以像在常规数组上一样在这个伪数组上调用 .length 方法，在这种情况下，您将得到 0.

test.length // returns 0

第二个要理解的概念是 truthy 和 falsy 值如何在 if 语句中工作：

如果将零 (0) 或 null 或空字符串 ("") 放入 if 语句中，if声明会将其减少为错误。但是，如果您输入一个常规字符串 ("hello") 或一个数字 (22) 甚至一个空数组 ([])，if 语句会将其计算为真。

if(undefined){...} 将计算为 false
if(""){...} 将计算为 false
if(2){...} 将计算为真
if("hiya"){...} 将计算为真
if([]){...} 将计算为真

如您所见，如果将一个空的 jQuery 集 ([]) 放入 if 语句中，它被认为是一个 truthy 值和你的 if 块将运行.

解决方法是测试jQuery集的长度，如果为空，则结果为零（0），这是一个falsy值。

Jquery If/Else 始终计算为真

Jquery If/Else always evaluating to true

jquery

if-statement

Demo