Changement d'image à l'aide de jQuery

Y a-t-il une meilleure façon de gérer cette substitution d'image?Changement d'image à l'aide de jQuery

var image = $(obj).children("img"); 
if ($(image).attr("src") == "Images/TreeCollapse.gif") 
    $(image).attr("src", "Images/TreeExpand.gif"); 
else 
    $(image).attr("src", "Images/TreeCollapse.gif");

Source

2008-12-04 Jon Tackabury

Pourquoi?

$(obj).children("img").toggle(
    function(){ $(this).attr("src", "Images/TreeExpand.gif"); }, 
    function(){ $(this).attr("src", "Images/TreeCollapse.gif"); } 
);

Source

2008-12-04 15:56:58

Génial! Je n'étais pas au courant de jQuery.toggle (fn1, fn2, ...) – orip

Selon le nombre de fois que vous cherchez à appeler 'obj', vous * pourriez * simplement placer tout ce que' obj' est égal à avant enfants ("img"), car c'est une autre variable qui n'a pas besoin d'être appelée. Pas sûr de la logique derrière cela, cependant. Votre appel :) –

J'aime! Je n'étais pas non plus au courant de ce jeu de paramètres à bascule. Merci! –

Pas vraiment.

Je sais ... réponse extrêmement utile. Ce que vous faites est assez succinct et je ne suis pas sûr qu'il y aurait quelque chose pour le rendre plus "jquery" comme vous le demandez.

maintenant en fonction de la façon dont vous parcourez cette étape si vous le faites vers plusieurs instances d'image, c'est là qu'il pourrait y avoir des optimisations de jQuery.

Source

2008-12-04 15:40:39

Plus de jQueryish? Peut être! Plus clair? Je ne suis pas sûr!

var image = $(obj).children("img"); 
$(image).toggle(
    function() { $(image).attr("src", "Images/TreeExpand.gif");}, 
    function() { $(image).attr("src", "Images/TreeCollapse.gif");} 
);

Source

2008-12-04 15:45:51 BigJump

Vous n'avez pas besoin du second '$ (image)'. Vous pouvez simplement appeler 'image.toggle (...)' – sensor

Vous pouvez faire quelque chose comme ça

par exemple

$(function() 
    { 
     $(obj) 
     .children("img") 
     .attr('src', swapImage);  
    }); 

function swapImage(){ 
    return ( 
       $(this).attr('src') == "Images/TreeCollapse.gif" ? 
            "Images/TreeExpand.gif" : 
            "Images/TreeCollapse.gif"); 
}

N.B. dans votre question vous faites $ (image) plusieurs fois. Il vaut mieux mettre en cache la recherche dans une var. Var $ image = $ (obj) .children ("img"); puis utiliser l'image $ à partir de là dans

Source

2008-12-04 15:51:24 redsquare

alternatives possibles:.

Utilisez toggleClass et mettre les images en stylesheet sous forme d'images d'arrière-plan.
Utilisez 2 images et toggle eux.

Source

2008-12-04 15:51:32 Aleris

Votre l'image objet serait déjà une instance JQuery donc il n'y a pas besoin pour vous de passer à travers $ (...) à nouveau.

Il est recommandé de préfixer les variables qui sont des instances jquery avec $ et de les utiliser directement par la suite.

var $image = $(obj).children("img"); 
if ($image.attr("src") == "Images/TreeCollapse.gif") 
    $image.attr("src", "Images/TreeExpand.gif"); 
else 
    $image.attr("src", "Images/TreeCollapse.gif");

Source

2008-12-04 15:52:00 duckyflip

Wow. Les réponses arrivent, n'est-ce pas? Tous les ci-dessus serait travailler, mais vous pouvez essayer pour une ligne unique (il est non testé) ...

image.setAttribute("src", "Images/Tree" + ((image.getAttribute("src").indexOf("Collapse")>0) ? "Expand" : "Collapse") + ".gif");

Mise à jour: Je viens de tester cela et il fonctionne, voilà ce que la personne qui a voté le soin d'expliquer pourquoi ils l'ont fait? Pourquoi définir une variable quand elle n'est pas nécessaire?

Source

2008-12-04 15:54:53

Changement d'image à l'aide de jQuery

Répondre

Questions connexes