如何縮短這個jquery函數？

-1

<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中有一堆代碼。那麼我怎麼縮短它呢？

來源

2013-03-08 Kenneth Ma

你想循環所有div的相同的三個圖像？ – 2013-03-08 21:12:50

檢查屬性選擇器：http://api.jquery.com/attribute-equals-selector/ – bygrace 2013-03-08 21:13:39

你想縮短你的js函數或不重複每個單元格嗎？ – bygrace 2013-03-08 21:16:34

如果所有的元素都經歷了相同的圖像週期，你可以使用類以及活動適用於所有的人。例如：

<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-08 21:15:13

非常感謝你！ – 2013-03-08 21:40:31

沒問題。如果這是你正在尋找的答案，隨時接受它。無論哪種情況，我都會建議編輯您的問題，以更具體地表達您是否希望縮短功能，或者將其應用於所有div。 – 2013-03-08 21:42:36

使用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-08 21:14:16

不應該是*最後一種情況*'默認'？ – 2013-03-08 21:17:58

@ shiplu.mokadd.im - 我會更正它，這應該是默認的。 – 2013-03-08 21:18:52

我不知道它是多麼乾淨，但不應該是這樣的工作？

$("#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-08 21:16:31 GJK

你可以你的源代碼映射到一個對象，像這樣：

$("#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聲明，並可以很容易地擴展對象，以增加更多的src秒。

來源

2013-03-08 21:17:13

var src = this.getAttribute("src"); 

this.src = src == "blank.png" ? "hello.png" : 
      src == "hello.png" ? "hi.png" : 
           "blank.png";

來源

2013-03-08 21:29:32

如何縮短這個jquery函數？

回答

相關問題