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?