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的值更改为＆＃34; / redblank＆＃34;：

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

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

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

为了理解其工作原理，您需要熟悉两个概念。

第一个是jQuery包装集如何工作。 $('a')，例如：

当您使用jQuery选择元素时，即使页面上不存在该元素，jQuery仍会创建“容器”（伪数组），但它将为空。这可以通过以下方式证明：

打开浏览器的控制台并输入var test = $('.doesNotExist')
点击进入。
在下一行，通过键入test并再次按Enter键注销该变量。

你会看到：

[]

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

test.length // returns 0

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

如果将零（0）或null或空字符串（""）放入if语句，if语句将把它减少到假。但是，如果您放置常规字符串（"hello"）或数字（22）或甚至是空数组（[]），if语句会将其评估为true。

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

正如您所看到的，如果您将一个空的jQuery集（[]）放入if语句中，它将被视为 truthy 值和您的{{ 1}}块将运行。

解决方案是测试jQuery集的长度，如果为空，将导致零（if），这是 falsy 值。

Answer 3

你可以检查这样的条件

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">' );
}

Jquery If / Else总是评估为true

3 个答案:

<强> Demo