javascript image toggling

Question

我有一個樹形視圖，默認情況下有一個文件夾圖標，一旦點擊它就必須更改爲複選框圖標。進一步點擊複選框圖標應顯示一個文件夾圖標。

示例代碼：

---

服務器端代碼：C＃

htmlSb.AppendFormat("<li><span class=\"folder\" 
    onclick=\"javascript:return Test.Controls.TreeView.SelectNode('" 
    + this.Id 
    + "',this);\">{0}</span></li>", emptyContent); 

---

JavaScript代碼：

var Test= new Object(); 
Test.Controls=new Object(); 
Test.Controls.TreeView = new Object(); 

Test.Controls.TreeView.SelectNode = function (TreeId, nodeLabel) { 
    $("#" + TreeId + " li span, ul li span").css("background-color", "transparent"); 
    nodeLabel.style.backgroundColor = "white"; 
    nodeLabel.style.background = "url(../images/selected.gif) 0 0 no-repeat"; 
} 

---

另一圖像：

if (nodeLabel.style.background = "url(../images/folderclosed.gif) 0 0 no-repeat") 

我需要"selected.gif"和"folderclosed.gif"圖像之間切換。如果點擊了另一個應該顯示。反之亦然。

請幫忙。

Answer 1

看起來像你有jQuery提供給你。這應該是訣竅：

// get a jquery object for the node label 
var $nodeLabel = $(nodeLabel); 

if ($nodeLabel.data('background') == '' || $nodeLabel.data('background') == 'folderclosed') { 
    // if the node label has no background data set or is set to folderclosed, set to selected 
    $nodeLabel.data('background', 'selected').css('background', 'url(../images/selected.gif) 0 0 no-repeat'); 
} else { 
    // if the node label is set to selected, set to folderclosed 
    $nodeLabel.data('background', 'folderclosed').css('background', 'url(../images/folderclosed.gif) 0 0 no-repeat'); 
} 

Answer 2

聽起來像jQuery切換功能將是最簡單的，因爲它是專爲此設計的。

http://api.jquery.com/toggle/