Переключение изображения с помощью 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");

Ответы

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

например

$(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.

Ответ 4

Ваш объект 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");

Ответ 5

Не совсем.

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

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

Ответ 6

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

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

Ответ 7

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

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

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