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

Question

Есть ли лучший, более 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");

Answer 1

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

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

Answer 2

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

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

Answer 3

Ваш 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");

Answer 4

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

* 1003 например *

$(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 $ image = $ (obj) .children ("img"); затем используйте изображение $ оттуда в.

Answer 5

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

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

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

Answer 6

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

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

Answer 7

Не совсем.

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

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