id/clasă selector selector bază selector v/s

Având următoarele HTML:

<input type="checkbox" name="amazon_activated" /> <table> <tr> <td> Amazon Data </td> </tr> </table>
 

codul următor permite ascunderea/afișarea tabelului cu contacte de date în legătură cu caseta de selectare:

$("input[name='amazon_activated']").click(function(){
    $(this).parent("legend").next("table").toggle( $(this).is(":checked") );
});

și codul următor trebuie să inițieze starea hide/show după încărcarea paginii:

if ( ! $("input[name='amazon_activated']").is(":checked")){
    $(this).parent("legend").next("table").hide();
}

Ei bine, e în neregulă.

Deja știu de ce: acest se referă la elementul page , nu la elementul .


Deci mă întreb:

Este alege imediat id/class cea mai bună politică:

$("#id")

pentru elementele importante pentru a facilita controlul lor prin jquery, asupra selectorilor bazați pe formulare ?:

$("input[name='amazon_activated']")
0

5 răspunsuri

Cache elementul.

var element = this;

Când acest este în contextul potrivit.


De obicei codați Javascript pentru un marcaj dat, nu invers. ID-urile și clasele au altceva înțeles decât să fie folosite ca selectori.

1
adăugat
Nu, am abordat problema. Nu adăugați clase sau ID-uri inutile. În schimb, odată ce găsiți elementul pe care îl doriți, salvați-l într-o variabilă și utilizați-l în loc de out-of-context.
adăugat autor Madara Uchiha, sursa
+1 Sfat bun, dar chestiunea problema rămâne.
adăugat autor Igor Parra, sursa

Cred că motivul pentru care fiecare răspuns îți spune să-ți cacheze obiectele este că va fi cu mult mai rapid. Pentru a răspunde la întrebarea specifică, fără a ține seama de restul, adică

Este cea mai bună politică pentru a alege imediat un id/clasă pentru cea mai importantă   elemente pentru a facilita controlul lor prin jquery, peste   selectori pe bază de formula?

În primul rând, aș spune "selectori de atribute" peste "selectori pe bază de formule", deoarece nu cred că jQuery distinge între, de exemplu $ ("input [name =" amazon_activated "]") > $ ('a [href = "#"]') în măsura în care căutările.

Acestea fiind spuse, regula generală este:

selectorii id sunt mai rapizi decât selectorii de clasă sunt mai rapizi decât atributul   selectori.

Deci, dacă tot ce vă interesează este viteza jQuery, asta-i cheia. Cu toate acestea, adăugarea de numere de identificare și clase, numai de dragul direcționării prin jQuery, ar putea încetini timpul de încărcare a paginii dvs. mai mult decât viteza corespunzătoare în performanța selectorului.

În rezumat la acest răspuns prea lung:

  • Cache rezultatul unui selector jQuery, atunci când este posibil
  • Folosiți ID-uri și clase atunci când este posibil, dar
  • Nu adăugați ID-uri și clase inutile dacă testul nu le dovedește necesar
1
adăugat
if ( ! $("input[name='amazon_activated']").is(":checked")){
    $(this).parent("legend").next("table").hide();
}

în interiorul codului de mai sus acest aparțin domeniului de aplicare a elementului paginii, unde

$("input[name='amazon_activated']").click(function(){
    $(this).parent("legend").next("table").toggle( $(this).is(":checked") );
});

în codul de mai sus acest aparține domeniului de apel invers input [name = 'amazon_activated'] care indică input [name = 'amazon_activated' .

Deci, pentru a face primul cod activ ar trebui să încercați

if ( ! $("input[name='amazon_activated']").is(":checked")){
    $("input[name='amazon_activated']").parent("legend").next("table").hide();
}

Este mai bine să păstrați referința intrării într-o variabilă și să o utilizați

var checkboxElement = $("input[name='amazon_activated']");//you can also use id

atunci vă place asta

if ( ! checkboxElement.is(":checked")){
    checkboxElement.parent("legend").next("table").hide();
}

checkboxElement.click(function(){
    $(this).parent("legend").next("table").toggle( $(this).is(":checked") );
});
1
adăugat

Cred că vă puteți cache-ul elementelor dvs. în partea superioară a funcției exterioare. Va fi convenabil să le folosiți în alte locuri. De asemenea, elementele de caching vor spori și performanța. Puteți face așa ceva:

var input = $("input[type='checkbox']"),
    table = $("fieldset table");
1
adăugat

Thanks to all for your answers. All have been very helpful (I give +1 to all).

Vreau să adaug soluțiile mele finale care ține cont de sfaturile tale.

Într-adevăr, există mai multe elemente box implicate, așa că am cache ele și folosesc o matrice asociativă id/class ).

var checkboxElements = {
    "amazon_activated" : $("input[name='amazon_activated']"),
    "clickbank_activated" : $("input[name='clickbank_activated']"),
    "ebay_activated" : $("input[name='ebay_activated']")
}

$.each(checkboxElements, function(i, el){
    $(el).parent("legend").next("table").toggle( $(el).is(":checked") );
    $(el).click(function(){
        $(el).parent("legend").next("table").toggle( $(el).is(":checked") );
    });
});
0
adăugat
JavaScript, România - Moldova
JavaScript, România - Moldova
328 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com