Переключение изображения с помощью jQuery

Есть ли лучший, более jQuery-ish способ обработки этой подстановки изображения?

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");
7 ответов

Не совсем.

Я знаю... чрезвычайно полезный ответ. То, что вы делаете, довольно кратким, и я не уверен, что будет что-то, что сделает его более "jQueryish", как вы просите.

теперь зависит от того, как вы повторяете это, если вы делаете это для нескольких экземпляров изображений, то есть там, где могут быть некоторые оптимизации jQuery.


Возможные альтернативы:

  • Используйте toggleClass и поместите изображения в таблицу стилей в качестве фоновых изображений.
  • Используйте 2 изображения и toggle их.


Ого. Ответы приходят, не так ли? Все вышесказанное будет работать, но вы можете попробовать это для однострочного (непроверенного)...

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

Обновление: я только что протестировал это, и он работает, так же как и тот, кто проголосовал за него, чтобы объяснить, почему они это сделали?


Зачем устанавливать переменную, когда она не нужна?

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


Больше jQueryish? Может быть! Яснее? Я не уверен!

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


Вы можете сделать что-то вроде этого

например

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

N.B в вашем вопросе вы делаете $(изображение) несколько раз. Лучше кэшировать поиск в var, например var $image = $(obj).children( "img" ); затем используйте изображение $from there on in.


Ваш объект image уже будет экземпляром jquery, поэтому вам не нужно будет передавать его через $(...) снова.

Хорошей практикой является добавление переменных, которые являются экземплярами 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");

licensed under cc by-sa 3.0 with attribution.