0

そこで、2 つの画像を切り替えることができる画像切り替え機能を作成しています。具体的には、div の背景画像を切り替えます。

jquery .data() 関数をカウンターとして使用しています。ここで、1 つが最初の画像、2 つが切り替えられた画像です。

私が使用しているアルゴリズムは次のとおりです。

  1. ボタンをクリックして機能を開始します。
  2. divをクリックすると、データが「1」に等しい場合、画像を置き換えてデータを「2」に設定します。
  3. 画像をもう一度クリックすると、画像を元の画像に戻し、データを「1」に設定して、関数が繰り返されるようにします。

最初の「if」のように、最初の試行で画像を置き換えているように見えますが、2 回目の試行 (else 部分) では画像を再度置き換えません。最初の if が false を返してから else に移動する必要があるにもかかわらず、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

「else」の最初の行にタイプミスがあります(this)

于 2012-09-19T06:18:24.157 に答える
1

$ 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");
           }               
    });
}
于 2012-09-19T06:19:50.780 に答える
0

クラスとを使用すると、やりたいことをはるかに短くすることができます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');
});
于 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 に答える