如果 else 语句没有到达 else 部分答案

【问题标题】：If else statement not reaching the else part如果 else 语句没有到达 else 部分
【发布时间】：2012-09-19 06:15:37
【问题描述】：

所以我正在制作一个可以在两个图像之间切换的图像切换功能。更具体地说，它切换 div 的背景图像。

我使用 jquery .data() 函数作为计数器，其中一个 = 第一个图像，两个 = 切换图像。

这是我正在使用的算法：

点击按钮启动功能。
当我点击 div 时，如果数据等于“一”，则替换图像并将数据设置为“二”。
当我再次单击图像时，将图像恢复为原始图像并将数据设置为“一”，以便函数可以重复自身。

它似乎在第一次尝试时替换了图像，就像在第一次“if”中一样，但在第二次尝试时它不会再次替换图像（else 部分）。它似乎永远不会到达 else 部分，即使第一个 if 应该返回 false 然后转到 else。

任何帮助将不胜感激。另外，我知道有一个 .toggle() 函数和其他图像切换方法，但我必须使用这个，因为这只是一个较大程序的一小部分，已编辑。

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery.js"></script>
        <link rel="stylesheet" type="text/css" href="mouseovertestlayout.css" />
        <script>
        function startEdit()
        {     
            $("div").click(function () 
            {                           

                if (($(this).data('kangaroo')) == "one")
                {
                    $(this).css('background-image', "url(image2.png)");
                    $(this).data('kangaroo',"two"); 
                }
                else
                {
                    (this).css('background-image', "url(image1.png)");                  
                    $(this).data('kangaroo',"one");
                }               
            });
        }
        </script>
    </head>
    <body>
        <div class="container"  data-kangaroo="one" ></div>
        <button  onclick="startEdit()"> </button> 
    </body>
</html>

这是我的 .css

.container
{
    width: 20px;
    height: 20px;
    line-height: 0;
    border-style:solid;
    border-width:1px;
    border-color:red;
    padding: 20px;
    background-repeat:no-repeat;    
    background-image:url('image1.png');
}

【问题讨论】：

请正确缩进您的代码。它使语法错误更容易被发现。
既然你已经有了答案（如果它确实是正确的）错误控制台会指出，那么请删除这篇文章.. 它过于本地化了。

标签： javascript jquery

【解决方案1】：

你的“else”第一行有一个错字是(this)处缺少的$

【讨论】：

omfg 我太傻了。感谢您发现它，它解决了这个问题。爱你的男人。
如果您使用某种 JavaScript 调试器，错误将被打印到控制台。我建议您学习调试它：netmagazine.com/tutorials/javascript-debugging-beginners 不是最好的资源，但应该可以帮助您入门。

【解决方案2】：

您在 else 子句中缺少 $。

固定：

function startEdit() {     
        $("div").click(function () 
        {                           

          if (($(this).data('kangaroo')) == "one")
          {
             $(this).css('background-image', "url(image2.png)");
             $(this).data('kangaroo',"two");    
          }
          else
          {
             $(this).css('background-image', "url(image1.png)");                  
             $(this).data('kangaroo',"one");
           }               
    });
}

【讨论】：

【解决方案3】：

这样试试

if (($(this).attr("data-kangaroo")) == "one")  //Here is the edit
{
       $(this).css('background-image', "url(image2.png)");

        $(this).data('kangaroo',"two");

    }
else
    {
        $(this).css('background-image', "url(image1.png)");     //Here put "$" before (this)             
        $(this).data('kangaroo',"one");
    }

【讨论】：

【解决方案4】：

如果你使用一个类和toggleClass，你想做的事情可以做得更短。

演示： http://jsbin.com/anazoq/1/edit

HTML：

<div class="container"></div>
<button>Toggle</button>

CSS：

div {
    ...
    background: url(image1.png) no-repeat;
}
.switch {
    background-image: url(image2.png);
}

JavaScript：

$('button').click(function() {
    $('div').toggleClass('switch');
});

【讨论】：