img - Cambiar una imagen usando jQuery

jquery img src replace

Question

¿Hay una manera mejor y más jQuery-ish de manejar esta sustitución de imágenes?

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");

Answer 1

¿Por qué configurar una variable cuando no es necesaria?

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

Answer 2

Podrías hacer algo como esto

p.ej

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

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

NB: en su pregunta usted hace $ (imagen) varias veces. Es mejor guardar en caché la búsqueda en var var por ejemplo var $ image = $ (obj) .children ("img"); luego usa la imagen $ desde allí en adelante.

Answer 3

Posibles alternativas:

• Use toggleClass y coloque las imágenes en stylesheet como imágenes de fondo.
• Use 2 imágenes y alternarlas .

Answer 4

Realmente no.

Lo sé ... una respuesta extremadamente útil. Lo que estás haciendo es bastante breve y no estoy tan seguro de que haya algo que lo haga más "jQueryish" como preguntas.

ahora, dependiendo de cómo itere a través de esto si lo está haciendo en varias instancias de imágenes, es posible que haya algunas optimizaciones de jQuery.

Answer 5

Su objeto de imagen ya sería una instancia JQUery, por lo que no es necesario que pase nuevamente $ (...) .

Una buena práctica es anteponer las variables que son jquery instancias con $ y usarlas directamente después.

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");

Answer 6

Más jQueryish? ¡Tal vez! ¿Más claro? ¡No estoy seguro!

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

Answer 7

Guau. Las respuestas llegan volando, ¿no? Todo lo anterior funcionaría, pero podrías probar esto para un trazador de líneas único (no probado) ...

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

Actualización: acabo de probar esto y funciona, ¿le importaría a la persona que lo votó explicar por qué lo hicieron?