går det att göra det snyggare

Trädvy Permalänk
Medlem
Plats
kolbäck
Registrerad
Feb 2011

går det att göra det snyggare

hej
jag vill får fram en 2 olika ruta när jag trycker på 2st knapp/ruta. Jag har löst det men vill kolla om det finns en snyggare lösning.
här mitt förlag
html

<div id="pknap" class="IO_box30" onclick="visap()"> </div> <div id="bknap" class="IO_box31" onclick="visab()"> </div>

java skript

function visap() { if(document.getElementById("pump_ruta").style.visibility == "visible") { document.getElementById("pump_ruta").style.visibility = "hidden"; } else { document.getElementById("pump_ruta").style.visibility = "visible"; document.getElementById("bran_ruta").style.visibility = "hidden"; } } function visab() { if(document.getElementById("bran_ruta").style.visibility == "visible") { document.getElementById("bran_ruta").style.visibility = "hidden"; } else { document.getElementById("bran_ruta").style.visibility = "visible"; document.getElementById("pump_ruta").style.visibility = "hidden"; } }

Trädvy Permalänk
Medlem
Plats
Sverige
Registrerad
Aug 2003

Absolut går det att förbättra. Jag hade förstås hellre använt jquery och satt upp event eller dylikt men om man utgår från ditt exempel:

<div id="pknap" class="IO_box30" onclick="visa('pump_ruta','bran_ruta')"> asdfsadf </div> <div id="bknap" class="IO_box31" onclick="visa('bran_ruta','pump_ruta')"> asdfasdf </div> <div id="pump_ruta">pump ruta</div> <div id="bran_ruta">pump ruta</div>

js

function visa(toggleRuta, andraRutan) { if(document.getElementById(toggleRuta).style.visibility == "visible") { document.getElementById(toggleRuta).style.visibility = "hidden"; } else { document.getElementById(toggleRuta).style.visibility = "visible"; document.getElementById(andraRutan).style.visibility = "hidden"; } }

DRY (don't repeat yourself) principen är det enda jag applicerat. Att ha 2 funktioner som gör i princip samma sak brukar vara enkla att bryta ut och göra mer generiska.