javascript image bascule

Question

J'ai une vue arborescente qui a une icône de dossier par défaut et une fois cliqué, il doit être changé en une icône de case à cocher. Et plus loin en cliquant sur l'icône de case à cocher devrait afficher une icône de dossier.

Exemple de code:

---

code côté serveur: C#

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

---

code 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"; 
} 

---

L'autre image:

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

Je dois alterner entre "selected.gif" et "folderclosed.gif" images. Si l'un d'eux est cliqué, l'autre devrait s'afficher. et vice versa.

Aidez-nous s'il vous plaît.

Answer 1

On dirait que vous avez jQuery à votre disposition. Cela devrait faire l'affaire:

// 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

ressemble à la fonction de bascule jQuery serait plus facile car il a été conçu pour cela.

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