Question

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

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

这是我正在使用的算法：

点击按钮开始功能。
当我点击div时，如果数据等于“1”，则替换图像并将数据设置为“2”。
当我再次单击图像时，将图像设置回原始图像并将数据设置为“1”，以便该功能可以自行重复。

它似乎在第一次尝试时替换了图像，如在第一次“if”中，但它在第二次尝试时没有替换图像（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');
}

Answer 1

你的“其他”第一行有一个拼写错误是(this)

缺少$

Answer 2

您缺少$ in 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");
           }               
    });
}

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

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

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

4 个答案: