Izmantojot .fadeIn()
un .fadeOut()
, es paslēpju/parādīju elementu savā lapā, bet ar divām pogām - vienu slēpt un otru parādīt. Tagad es gribu, lai man būtu viena poga, ar ko pārslēgt abas**.
Mana HTML / JavaScript ir šāds:
<a onclick="showTestElement()">Show</a>
<a onclick="hideTestElement()">Hide</a>
function showTestElement() {
$('#testElement').fadeIn('fast');
}
function hideTestElement() {
$('#testElement').fadeOut('fast');
}
Mana HTML / JavaScript, kā es vēlētos, lai būtu:
<a onclick="toggleTestElement()">Show/Hide</a>
function toggleTestElement() {
if (document.getElementById('testElement').***IS_VISIBLE***) {
$('#testElement').fadeOut('fast');
} else {
$('#testElement').fadeIn('fast');
}
}
Kā noteikt, vai elements ir vai nav redzams?
Jūs meklējat:
.is(':visible')
Lai gan, iespējams, jums vajadzētu mainīt selektoru, lai izmantotu jQuery, ņemot vērā, ka jūs tik un tā to izmantojat citās vietās:
if($('#testElement').is(':visible')) {
// Code
}
Ir svarīgi atzīmēt, ka, ja kāds no mērķa elementa vecākiem ir paslēpts, tad .is(':visible')
atvasinātajam elementam atgriezīs false
(kas ir loģiski).
:visible
ir bijis pazīstams kā diezgan lēns selektors, jo tam ir jāpārmeklē DOM koks, pārbaudot vairākus elementus. Tomēr jQuery 3 ir labas ziņas, kā paskaidrots šajā rakstā (Ctrl + F :visible
):
Pateicoties detektīvdarbam, ko veica Paul Irish no Google, mēs identificējām dažus gadījumus, kad mēs varētu izlaist papildu darbu, ja tādi selektori kā :visible tiek lietoti vairākas reizes vienā dokumentā. Šis konkrētais gadījums tagad ir līdz pat 17 reizēm ātrāks!
Paturiet prātā, ka pat ar šo uzlabojumu tādi selektori kā :visible un :hidden var būt dārgi, jo tie ir atkarīgi no pārlūkprogrammas, lai noteiktu, vai elementi patiešām tiek parādīti lapā. Tas sliktākajā gadījumā var prasīt pilnīgu CSS stilu un lapas izkārtojuma pārrēķināšanu! Lai gan vairumā gadījumu mēs neatsakām tos izmantot, mēs iesakām pārbaudīt lapas, lai noteiktu, vai šie selektori nerada veiktspējas problēmas.
Ja vēl vairāk izvēršam jūsu konkrēto izmantošanas gadījumu, ir iebūvēta jQuery funkcija ar nosaukumu $.fadeToggle()
:
function toggleTestElement() {
$('#testElement').fadeToggle('fast');
}
if($('#testElement').is(':visible')){
//what you want to do when is visible
}