Przeczytałem cały samouczek JavaScript W3Schools (podstawowy i zaawansowany) więcej niż 3 razy. Przeczytałem tutoriale HTML / CSS niezliczone czasy. Przeczytałem również kilka postów na tej stronie dotyczące funkcji Sho / Hide. Próbowałem użyć zmiennych JavaScript, ale dostaję błędy.

Absolutnie nie jQuery, tylko javascript.

Moje znaczniki:

<script type="text/javascript" src="/showerHider.js"></script>

<div id="wrappernav"> </div>

<div class="container">
   <a id="btntxt" href="javascript:showerHider(document.getElementById('wrappernav'))">HIDE NAVIGATION</a>
   <a id="btn" href="javascript:showerHider(document.getElementById('wrappernav'))"></a>
</div>

Jestem minimalistycznym koderem i chcesz uprościć funkcję JavaScript My showerHider i atrybuty mojego znacznika. Mam nawigację <div id="wrappernav">, która przejduje pionowo z SWAREEN, gdy użytkownik kliknie jeden z dwóch przycisków , które są zagnieżdżone w innym {x2}}. Gdy przejścia {X3}} Dwa przyciski są przeniesione i stają się Pokaż przyciski , aby dać użytkownikowi opcję ... Cóż, możesz zobaczyć, gdzie to się dzieje ...

Mój zewnętrzny javascript:

function showeHider(floater)
{
floater.style.webkitTransition = "margin-top .25s ease-in-out 0s" ;

if (floater.style.marginTop == "-345px" )
  {
  floater.style.marginTop = "25px" ;
  document.getElementById("btntxt") .innerHTML = "HIDE NAVIGATION" ;
  document.getElementById("btntxt") .style.top = "-370px" ;
  document.getElementById("btntxt") .style.left = "162px" ;
  document.getElementById("btn") .style.top = "-300px" ;
  document.getElementById("btn") .style.left = "135px" ;
  }

else
  {
  floater.style.marginTop = "-345px" ;
  document.getElementById("btntxt") .innerHTML = "SHOW NAVIGATION" ;
  document.getElementById("btntxt") .style.top = "20px" ;
  document.getElementById("btntxt") .style.left = "490px" ;
  document.getElementById("btn") .style.top = "17px" ;
  document.getElementById("btn") .style.left = "450px" ;
  }
}

Obecnie mam JavaScript w atrybucie onclick z przycisków Close / show , które wiążą przyciski do funkcji showerHider. Chcę uprościć te atrybuty i umieścić JavaScript wewnątrz zewnętrznego pliku JavaScript showerHider. Nie jestem również pewien, czy powinienem pozwolić JavaScript uchwycić przejście lub użyć CSS. Uważam, że JavaScript jest trudny, gdy deklarujesz przejścia dla wszystkich głównych przeglądarek i wolą pozwolić CSS.

0
Xavier 22 listopad 2013, 03:08

2 odpowiedzi

Najlepsza odpowiedź

Jest to wersja uproszczona:

function showeHider(floater) {
  var btn, btntxt, arrValues, strPx;

  floater.style.webkitTransition = "margin-top .25s ease-in-out 0s";

  btn = document.getElementById("btn");
  btntxt = document.getElementById("btntxt");

  arrValues = (floater.style.marginTop == "-345px") ? ["25", "HIDE", "-370", "162", "-300", "135"] : ["-345", "SHOW", "20", "490", "17", "450"];
  strPx = "px";

  floater.style.marginTop = arrValues[0] + strPx;
  btntxt.innerHTML = arrValues[1] + " NAVIGATION";
  btntxt.style.top = arrValues[2] + strPx;
  btntxt.style.left = arrValues[3] + strPx;
  btn.style.top = arrValues[4] + strPx;
  btn.style.left = arrValues[5] + strPx;
}

Może strPx był overkill, ale jeśli kiedykolwiek zaplanujesz na minimalizację kodu, że var będzie tylko 1 długość znaczenia i powinno być pewne zyski.

Co zrobiłem:

  • pamięć podręczna elementy btn i btntxt
  • Umieść wartości na tablicy
  • Użyj operatora Terrary a ? b : c, co oznacza, czy rzeczy w a są prawdziwe, wybierze b inaczej c, możesz Przeczytaj więcej o tym tutaj.

Jednakże rozważmy silnie w posiadaniu dwóch klas, a następnie użyj JavaScript tylko po to, aby przełączać się między nimi, jak Jeff Powers Sugerowany.

0
Community 23 maj 2017, 12:14

Przenieś wszystkie swoje CSS do pliku CSS i gniazduj go pod klasą show-NAV i przełącz go na elemencie macierzystym.

Również atrybut OnClick został wykonany do uruchomienia funkcji JavaScript na kliknięciu, należy usunąć JavaScript z atrybutu HREF, który służy do łączenia się z innymi stronami.

   <a id="btntxt" href="#" onclick="hiderShower(document.getElementById('wrappernav'));">HIDE NAVIGATION</a>

Wiem, że nie chcesz używać jQuery, ale pomaga w oddzieleniu obaw. Generalnie nie chcesz połączeń do JavaScript w HTML. Wiązałbyś to z słuchacza zdarzeń z pliku JavaScript.

Oto link do innego pytania, który pokazuje, jak przełączać klasę z wanilią JavaScript i JQuery, jeśli zdecydujesz się go użyć.

Czy to jQuery może być zrobione w Vanilli JS?

0
Community 23 maj 2017, 12:21