javascript - jQuery code refactoring help needed -
an update before, here's i'm dealing with:
<body> <div class="header"> <img class="imglogo" src="img/vegtablelogo.jpg"> </div> <div id="thumbscontainer"> <div class="thumb" id="carrotthumb"> <img id="showcarrot" class="imgthumb" src="img/carot.jpg" onclick=setupveg("showcarrot", "carrotbig") /> </div> <div class="hidden" id="carrotbig"> <img class="imgbig" src="img/carot.jpg" /> </div> <div class="thumb" id="brocthumb"> <img id="showbroc" class="imgthumb" src="img/brocoli.jpg" onclick=setupveg("showbroc", "brocbig") /> </div> <div class="hidden" id="brocbig"> <img class="imgbig" src="img/brocoli.jpg" /> </div> </div> <!-- end thumbs container --> <script> var active = ""; function setupveg(thumbveg, hiddenveg) { $("#" + thumbveg).click(function() { if (active != hiddenveg) { $("div.hidden").hide("fast"); $("#" + hiddenveg).show("fast", function() {}); active = hiddenveg; } else { $("div.hidden").hide("fast"); active=""; } }); } $("div.hidden").click(function () { $("div.hidden").hide("fast"); isanybig=false; }); </script> </body>
this code not working unfortunately. have borrowed suggested solution below.
would nice if did work! suggestions, welcome.
i don't think need of flags or if conditions really. think logic is:
- toggle carrotbig whenever showcarrot clicked.
- hide div.hidden whenever showcarrot clicked.
so need is:
$("#showcarrot").click(function () { $("#carrotbig").toggle("fast"); $("#div.hidden").hide(); });
.toggle handle 1 of flags (iscarrotbig) , .hide() won't if div.hidden hidden, takes care of isanybig flag.
now.. let's make work broc well...
function setupvegetable(showid, toggleid) { $("#" + showid).click(function () { $("#" + toggleid).toggle("fast"); $("#div.hidden").hide(); }); } setupvegetable("showcarrot", "carrotbig"); setupvegetable("showbroc", "brocbig");
if you're interested, can refactor further don't need supply ids each of vegetables. i'll need see html markup though.
Comments
Post a Comment