0

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

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

这是我正在使用的算法：

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

它似乎在第一次尝试时替换了图像，就像在第一次“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');
}
4

4 回答 4

4

您的“其他”第一行中有一个错字是 $ 缺少(this)

于 2012-09-19T06:18:24.157 回答
1

您在 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");
           }               
    });
}
于 2012-09-19T06:19:50.780 回答
0

What you want to do can be done much shorter if you use a class and toggleClass.

Demo: 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');
});
于 2012-09-19T06:29:51.343 回答
0

像这样试试

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");
    }
于 2012-09-19T06:18:47.697 回答