Leidsin valmis jQuery lõigu „Show/Hide" nupu jaoks, mis ei tööta? Kood, mis kasutab .toggle(), on kirjutatud aastakümne vanuse juhendi järgi ja lakkas vaikselt töötamast alates jQuery 1.9 versioonist. Algajale tundub see olukord musta maagiana: konsool on tühi, vigu pole, nupp lihtsalt ei reageeri teisele klikile.

Probleem on selles, et .toggle() meetodil jQuery-s oli kaks elu. Esimene, elementide animeeritud näitamine/peitmine, on endiselt elus. Teine, klikil vahelduvate tegevuste funktsionaalsus, eemaldati 2013. aastal, kuid otsingumootorid kuvavad endiselt vanu artikleid tipptulemustena. Siin selgitame, miks vana kood on surnud, ja kirjutame kolm töötavat alternatiivi, alates lihtsast lipust kuni data-atribuutideni tosina nupu jaoks korraga.

💡 Kiirülevaade:

• Miks sinu .toggle(fn1, fn2) ei tööta ja kust otsida aegunud koodi
• Meetod 1: olekumuutuja ühe nupu jaoks minimaalse koodiga
• Meetod 2: .data(), kui sul on palju nuppe ja igaüks elab oma elu
• Boonus: kolm või enam tegevust klikiahelas, kasutades loendurit
• Moodne .toggle() animatsiooniks, mis on alles ja kuidas seda kasutada

Mis on.toggle() jQuery-s ja miks vana kood on surnud

Enne jQuery 1.8 versiooni võis .toggle() meetod teha kahte erinevat asja, sõltuvalt edastatud argumentidest. Kui sa edastasid kaks funktsiooni parameetrit, töötas see lülitina: esimene klikk käivitas esimese funktsiooni, teine klikk teise, kolmas klikk jälle esimese ja nii edasi tsüklis.

See nägi välja kompaktne:

1
// Worked in jQuery before 1.8, removed in 1.9
2
$('#myButton').toggle(
3
  function() {
4
    $(this).text('Show categories').css('background', 'green');
5
  },
6
  function() {
7
    $(this).text('Hide categories').css('background', 'red');
8
  }
9
);

Just see kood on tänaseni ringelnud venekeelsetes blogides. Probleem on selles, et jQuery 1.9 (jaanuar 2013) väljalaskega eemaldati see .toggle() vorm täielikult. Põhjus: meetodi kahene eesmärk tekitas segadust ja algajad ei saanud aru, miks .toggle() mõnikord animeeris ja mõnikord lülitas tegevusi.

Täna teeb .toggle() ainult üht: näitab või peidab elementi animatsiooniga. Vahelduvate tegevuste jaoks peab arendaja olekut selgesõnaliselt haldama.

Meetod 1: olekumuutuja

Kõige otsesem lähenemine on luua tõeväärtusmuutuja ja lülitada seda .click() töötlejas. Sobib ühe nupu või ühise lülitusloogikaga elementide jaoks.

Lisa kood oma teema skriptifaili (wp_enqueue_script kaudu failis functions.php) või <script> plokki enne sulgevat </body> silti:

1
let isFirstClick = true;
2
 
3
$('#toggleBtn').on('click', function() {
4
  const $btn = $(this);
5
 
6
  if (isFirstClick) {
7
    $btn.text('Hide categories');
8
    $('#contentBlock').show(700);
9
    isFirstClick = false;
10
  } else {
11
    $btn.text('Show categories');
12
    $('#contentBlock').fadeOut('slow');
13
    isFirstClick = true;
14
  }
15
});

Siin salvestab isFirstClick hetkeoleku väljaspool töötlejat. Esimene klikk näitab plokki ja seab lipu väärtuseks false, teine peidab selle ja tagastab lipu tagasi. Pole mingit maagiat: sa tead täpselt, milline tegevus toimub praegu ja milline järgmisena.

Selle lähenemise eelis on see, et lippu saab lähtestada ükskõik kust programmist. Näiteks pärast AJAX päringut soovid nupu algolekusse tagasi viia, kasuta lihtsalt isFirstClick = true.

Puuduseks on üks muutuja kõigi nuppude jaoks. Kui lehel on kaks sõltumatut lülitit klassiga .toggleBtn, jagavad mõlemad isFirstClick muutujat. Sellise stsenaariumi puhul kasuta meetodit 2.

Meetod 2: jQuery data atribuudid

Kui sul on mitu sõltumatut nuppu (näiteks igal tootel kataloogis on oma spetsifikatsioonide plokk), pead olekut salvestama otse DOM elemendil. .data() meetod seob elemendiga suvalisi andmeid, reostamata globaalset skoopi.

Laadi skript samamoodi, wp_enqueue_script kaudu või jaluses:

1
$('.toggle-btn').on('click', function() {
2
  const $btn = $(this);
3
  const hasClicked = $btn.data('clicked') || false;
4
 
5
  if (!hasClicked) {
6
    $btn.text('Hide specifications').css('background', '#f0f0f0');
7
    $btn.next('.specs-block').show(400);
8
    $btn.data('clicked', true);
9
  } else {
10
    $btn.text('Show specifications').css('background', '#fff');
11
    $btn.next('.specs-block').fadeOut(300);
12
    $btn.data('clicked', false);
13
  }
14
});

$btn.data('clicked') väljakutse loeb selle konkreetse nupu olekut. Kümme nuppu lehel tähendab kümmet isoleeritud olekut. Konflikte pole.

Märkus: .data() töötab jQuery mäluga, mitte HTML data-* atribuutidega. Kui vajad, et olek säiliks lehe uuesti laadimisel, kirjuta lisaks $btn.attr('data-clicked', 'true') ja loe .attr() kaudu.

Boonus: kolm või enam tegevust ahelas

Mis siis, kui klikke peaks olema mitte kaks, vaid kolm? Näiteks: esimene vajutus näitab plokki, teine muudab selle sisu, kolmas peidab. Siin lood tõeväärtuslipu asemel numbrilise loenduri:

1
$('#multiBtn').on('click', function() {
2
  const $btn = $(this);
3
  let count = $btn.data('clickCount') || 0;
4
 
5
  switch (count) {
6
    case 0:
7
      $btn.text('Step 1: show block');
8
      $('#targetBlock').show(500);
9
      break;
10
    case 1:
11
      $btn.text('Step 2: load data');
12
      $('#targetBlock').load('/ajax-content');
13
      break;
14
    case 2:
15
      $btn.text('Step 3: hide');
16
      $('#targetBlock').fadeOut(400);
17
      count = -1; // next click will become case 0 again
18
      break;
19
  }
20
 
21
  $btn.data('clickCount', count + 1);
22
});

Loenduri lähtestamine (count = -1) on mõttekas, kui ahel peaks korduma. Kui tegevus on ühekordne, eemalda lihtsalt lähtestus ja pärast kolmandat klikki ei juhtu midagi.

Moodne.toggle() animatsiooniks

See .toggle() vorm, mis säilis, vastutab rangelt elemendi nähtavuse eest. Ilma argumentideta on see hetkeline lülitamine. Kestusega animeerib see samaaegselt laiust, kõrgust ja läbipaistmatust.

Põhistsenaarium: „Näita/Peida menüü" nupp:

1
$('#menuToggle').on('click', function() {
2
  $('#mainMenu').toggle('slow', function() {
3
    // callback after animation completes
4
    console.log('Animation complete');
5
  });
6
});

Stringid 'fast' ja 'slow' annavad vastavalt 200 ja 600 millisekundit. Võid edastada ka täpse arvu: .toggle(400) tähendab 400 ms.

Kasulik nipp: oleku sundimine tõeväärtusparameetri kaudu. .toggle(true) näitab alati elementi ja .toggle(false) peidab selle alati. See on mugav koos välise lipuga meetodist 1:

1
let visible = true;
2
$('#toggleBtn').on('click', function() {
3
  visible = !visible;
4
  $('#content').toggle(visible);
5
});

Kood loeb lineaarselt: lipp pööratakse ümber, element võtab vajaliku oleku. Pole tingimuslikku if/else nähtavuse ümber.

⁉️🤔 Korduma kippuvad küsimused

Miks mu vana kood käsuga .toggle(fn1, fn2) ei näita konsoolis vigu?

Vana .toggle() vorm eemaldati meetodi tasemel: jQuery lihtsalt ei leia sellist signatuuri ja ei tee vaikselt midagi. Konsool on tühi, sest .toggle(fn1, fn2) väljakutse on moodsa jQuery jaoks süntaktiliselt korrektne, kuid mõttetu kutsung (argumente ignoreeritakse). Kontrolli oma jQuery versiooni: kui see on 1.9 või uuem, on vana kood surnud.

Kas ma võin lisada jQuery Migrate'i ja koodi ümber mitte kirjutada?

Tehniliselt jah. jQuery Migrate'i plugin taastab eemaldatud meetodid, sealhulgas vana .toggle(). Kuid see on ajutine tugi: Migrate lisab ~10 KB minifitseeritult ja on mõeldud üleminekuperioodiks, mitte püsivaks kasutamiseks. Kui sait töötab WordPressil ja jQuery laaditakse tuumast, on Migrate seal juba tagasiühilduvuse tagamiseks olemas. Kuid sellele lootmine oma koodis ei ole soovitatav: teema või plugina uuendus võib selle igal hetkel keelata.

Kumb on parem, muutuja või data atribuut?

Ühe nupu puhul kasuta muutujat (vähem koodi). Mitme sõltumatu nupu või dünaamiliselt lisatud elementide puhul kasuta .data() (oleku isolatsioon). Kui nuppe lisatakse AJAX kaudu pärast lehe laadimist, kasuta delegeerimist: $(document).on('click', '.toggle-btn', function() { ... }).

Kas.toggle() töötab mobiilseadmetes?

Jah. Moodne .toggle() (animatsioon) ja kõik selle artikli klikitöötlejad töötavad puutesündmustega korrektselt. jQuery normaliseerib click sündmuse mobiilibrauserite jaoks alates oma varasematest versioonidest. Ainus nüanss: iOS-is enne versiooni 12 oli ilma cursor: pointer-ita elementidel viivitusega klikk, kuid see probleem on lahendatav ühe CSS reaga touch-action: manipulation nupu jaoks.

Kuhu peaksin jQuery koodi WordPressis paigutama?

Kolm võimalust. Kiire: Code Snippets plugin: sisesta JS kood tüübiga „JavaScript" lõigu sisse ja see laaditakse automaatselt jalusesse. Korrektne: loo fail js/toggle.js oma alamteemas, registreeri see wp_enqueue_script('my-toggle', get_stylesheet_directory_uri() . '/js/toggle.js', array('jquery'), '1.0', true) kaudu failis functions.php. Parameeter true lõpus saadab skripti jalusesse, mis on standardne DOM-iga töötava koodi puhul. Ära pane <script> silti otse postituse sisusse; WordPressi redaktor eemaldab selle sildi.

Milline lähenemine oma projekti jaoks valida

Kui sul on üks nupp teksti lülitamise ja ploki nähtavusega, kasuta olekumuutujat. Kolm rida, läbipaistev käitumine, triviaalne silumine.

Kui lüliteid on mitu (kataloog, seadete paneel, laiendatavate üksuste loend), kasuta ainult .data(). Globaalne muutuja mitme nupu jaoks tekitab oleku võidujooksu, mille silumine võtab kauem aega kui meetodi 2 järgi koodi kirjutamine.

Kolme või enama sammuga ahel nõuab loendurit koos switch-iga. Ära aja tõeväärtuslippudega keeruliseks seda, mis loomulikult sobib numbritega.

Kõige tähtsam: kui leiad otsingutulemustest artikli käsuga .toggle(fn1, fn2), sulge see vaheleht. jQuery on elus, kuid see konkreetne meetod maeti maha 2013. aastal.

Saad värskendada oma teadmisi JavaScripti lõikude käigu pealt käivitamise kohta meie artiklist Chrome DevToolsi lõikudega töötamise kohta, mis on kasulik selle artikli koodi kiireks testimiseks.