Vraag Schakelen tussen afbeeldingen met jQuery


Is er een betere, meer jQuery-achtige manier om met deze beeldvervanging om te gaan?

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

13
2017-12-04 15:28


oorsprong


antwoorden:


Waarom een ​​variabele instellen wanneer deze niet nodig is?

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

24
2017-12-04 15:56



Meer jQueryish? Kan zijn! Duidelijker? Ik weet het niet zeker!

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

4
2017-12-04 15:45



Je zou zoiets kunnen doen

bv

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

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

N.B in je vraag gebruik je $ (afbeelding) meerdere keren. Het is beter om de zoekopdracht op te slaan in een var, bijvoorbeeld var $ image = $ (obj) .children ("img"); gebruik dan de $ afbeelding vanaf daar in.


1
2017-12-04 15:51



Jouw beeld object zou al een jQuery-exemplaar zijn, dus u hoeft het niet door te geven $ (...) nog een keer.

Een goede gewoonte is om variabelen die jQuery-instanties zijn met $ om te zetten en direct daarna te gebruiken.

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
2017-12-04 15:52



Niet echt.

Ik weet het ... buitengewoon nuttig antwoord. Wat je aan het doen bent, is tamelijk bondig en ik ben er niet zo zeker van dat er iets zou zijn om het "jQueryish" te maken, zoals je vraagt.

nu, afhankelijk van hoe je dit doorzoekt als je het aan meerdere afbeeldingsinstanties doet, kunnen daar enkele jQuery-optimalisaties zijn.


0
2017-12-04 15:40



Mogelijke alternatieven:

  • Gebruik toggleClass en plaats de afbeeldingen in het stylesheet als achtergrondafbeeldingen.
  • Gebruik 2 afbeeldingen en toggle hen.

0
2017-12-04 15:51



Wauw. Antwoorden komen binnen vliegen, nietwaar? Al het bovenstaande zou werken, maar je zou dit kunnen proberen voor een one-liner (het is niet getest) ...

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

Update: ik heb dit zojuist getest en het werkt, dus zou de persoon die het heeft gestemd er ook om willen uitleggen waarom ze dat hebben gedaan?


0
2017-12-04 15:54