-1

だから私はこのような3×3のテーブルを持っています：

<table border="1">
  <tr>
    <td><img src="blank.png" alt="blank" id="one"/></td>
    <td><img src="blank.png" alt="blank" /></td>
    <td><img src="blank.png" alt="blank" /></td>
  </tr>
  <tr>
    <td><img src="blank.png" alt="blank" /></td>
    <td><img src="blank.png" alt="blank" /></td>
    <td><img src="blank.png" alt="blank" /></td>
  </tr>
  <tr>
    <td><img src="blank.png" alt="blank" /></td>
    <td><img src="blank.png" alt="blank" /></td>
    <td><img src="blank.png" alt="blank" /></td>
  </tr>
</table>

私のJavaScriptには、次のものがあります。

$("#one").click(function() {

    var src = $("#one").attr("src");

    if (src == "blank.png") {
        $(this).attr("src", "hello.png");
    }
    else if (src == "hello.png") {
        $(this).attr("src", "hi.png");
    }

    else {
        $(this).attr("src", "blank.png");
    }       
});

これにより、ユーザーがテーブルをクリックすると、テーブルの最初のセルが3つの画像間で切り替わります。セルごとに9つの一意のIDがすべてある場合は機能することはわかっていますが、javasciptに大量のコードを含めたくありません。では、どうすれば短縮できますか？

4

5 に答える 5

4

switchステートメントを使用する

$("#one").click(function() {
 switch(this.getAttribute("src")){
  case "blank.png":this.setAttribute("src","hello.png");break;
  case "hello.png":this.setAttribute("src","hi.png");break;
  default:this.setAttribute("src","blank.png");break;
 }
});

ここにデモがあります：http：//jsfiddle.net/9jMHS/1

于 2013-03-08T21:14:16.800 に答える
2

すべての要素が同じ画像サイクルを通過している場合は、クラスを使用して、すべての要素にイベントを適用できます。例えば：

<td><img src="blank.png" alt="blank" class="image-cycle"/></td>

そして、JavaScriptをそのクラスのすべての要素にバインドします。

$('.image-cycle').click( function () {
    // your code
    // the only thing that will have to change is 
    var src = $(this).attr("src");
}
于 2013-03-08T21:15:13.040 に答える
2

次のように、ソースをオブジェクトにマップできます。

$("#one").click(function() {
    var srcs = {
        "blank.png": "hello.png",
        "hello.png": "hi.png",
    }, src = $("#one").attr("src");

    $(this).attr("src", srcs[src] || "blank.png");
});

このようにして、不格好で見苦しいswitchステートメントを回避し、オブジェクトを簡単に拡張してさらにsrcsを追加できます。

于 2013-03-08T21:17:13.310 に答える
1

それがどれほどきれいかはわかりませんが、このようなものはうまくいかないのですか？

$("#one").click(function() {
    var src = $(this).attr("src");
    var img = ["blank.png", "hello.png", "hi.png"];
    $(this).attr("src", img[(img.indexOf(src.toLowerCase())+1)%3]);
});
于 2013-03-08T21:16:31.430 に答える
0 
var src = this.getAttribute("src");

this.src = src == "blank.png" ? "hello.png" :
           src == "hello.png" ? "hi.png"    :
                                "blank.png";
于 2013-03-08T21:29:32.567 に答える