Sihtimine Klõpsake sisestusväljal nuppu „Kustuta“ (X)

jQuery muudab teie projekti käivitamise lihtsaks. Kuigi viimastel aastatel on see soositud, tasub siiski õppida põhitõdesid, eriti kui soovite kiiret juurdepääsu selle võimsatele meetoditele.

Kuid kuigi jQuery on võimas raamatukogu, ei saa see kõike teha. Seal tuleb kasuks vanill JavaScripti kindel mõistmine.

Oletame, et teil on selline Wikipedia Vieweri projekt:

Search on Wikipedia

Search Random Article
$("#searchbox").keyup(function(event) { if(event.keyCode === 13) { $("#searchbutton").click(); }; }); $("#searchbutton").click(function() { var searchInput = document.getElementById("searchbox").value; searchInput = searchInput.toLowerCase(); if(searchInput !== "") { var myRequest = new XMLHttpRequest(); myRequest.open('GET','//en.wikipedia.org/w/api.php?action=query&list=search&srsearch='+ searchInput + '&utf8=&format=json&origin=*'); myRequest.onload = function() { var searchResults = JSON.parse(myRequest.responseText); $(".resultingarticles").empty(); for(i=0; i<10; i++) { var articleTitle = searchResults.query.search[i].title; var articleSnippet = searchResults.query.search[i].snippet; var articleId = searchResults.query.search[i].pageid; var articleLink = "//en.wikipedia.org/?curid=" + articleId; $(".resultingarticles").append("" + " " + "

"+articleTitle+"

" + "

" + articleSnippet + "

" + " " + ""); }; }; myRequest.send(); }; });

Kõik töötab ootuspäraselt - saate sisestada teksti otsingukasti, vajutada sisestusklahvi või nuppu "Otsi" ja vaadata Vikipeedia artiklite loendit.

Kuna kasutate type="search"oma inputelementi, lisab Chrome'i brauser sisestuse lõppu automaatselt tähe "X", kui tekst on olemas ja hõljutate kursorit sisendi kohal. Pange tähele, et teised brauserid võivad type="search"teisiti hakkama saada .

Kui klõpsate nupul "X", kaob tekst.

Kuid öelge, et teil on artiklite loend juba olemas ja kui teksti kustutate, soovite kustutada ka asustatud artiklid:

Selgub, et otsingukastis "X" klõpsamine käivitab "otsingu" sündmuse. jQuery ei toeta otsinguüritust, seega peate kirjutama sündmuste kuulaja vanilje JavaScripti abil:

document.getElementById("searchbox").addEventListener("search", function(event) { $(".resultingarticles").empty(); });

Kui otsingu sündmus on käivitatud, saate divartiklitega elemendi kustutamiseks kasutada jQuery-d :