Cambiar una imagen usando jQuery

¿Hay alguna manera mejor y más jQuery-ish de manejar esta sustitución de imágenes?Cambiar una imagen usando 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");

Fuente

2008-12-04 Jon Tackabury

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

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

Fuente

2008-12-04 15:56:58

¡Impresionante! No estaba al tanto de jQuery.toggle (fn1, fn2, ...) – orip

Dependiendo de la cantidad de veces que quieras llamar a 'obj', * podrías * querer colocar cualquier' obj' que sea igual a antes niños ("img"), ya que es otra variable que puede no necesitar ser llamada. Sin embargo, no estoy seguro de la lógica detrás de esto. Tu llamada :) –

¡Me gusta! Tampoco estaba al tanto de ese conjunto de parámetros de alternar. ¡Gracias! –

Realmente no.

Sé ... 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 está iterando a través de esto si lo está haciendo en varias instancias de imagen, es ahí donde podría haber algunas optimizaciones de jQuery.

Fuente

2008-12-04 15:40:39

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

Fuente

2008-12-04 15:45:51 BigJump

No necesita el segundo '$ (imagen)'. Simplemente puede llamar a 'image.toggle (...)' – sensor

que podría hacer algo como esto

por ejemplo

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

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

N.B en su pregunta que haces $ (imagen) varias veces. Es mejor guardar en caché la búsqueda en var var.g.g $ image = $ (obj) .children ("img"); a continuación, utilizar la imagen $ a partir de ahí en

Fuente

2008-12-04 15:51:24 redsquare

posibles alternativas:.

toggleClass Uso y poner las imágenes en hojas de estilo como imágenes de fondo.
Utilice 2 imágenes y toggle ellas.

Fuente

2008-12-04 15:51:32 Aleris

Su imagen objeto ya sería un ejemplo jQuery lo que no hay necesidad para que usted pase a través de $ (...) nuevo.

Una buena práctica es anteponer las variables que son instancias jquery 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");

Fuente

2008-12-04 15:52:00 duckyflip

Wow. Las respuestas llegan volando, ¿no? Todo lo anterior quiere trabajar, pero se podría intentar esto para una sola línea (que es no probado) ...

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

Actualización: Acabo probado esto y funciona, también lo haría la persona que votó Desearía explicar por qué lo hicieron?

Fuente

2008-12-04 15:54:53

Respuesta

Cuestiones relacionadas