/ / Refactor jquery to pass jquery-lint - jquery, jquery-lint

Refactor jquery prejsť jquery-lint - jquery, jquery-vlákna

Na html stránke mám nasledujúci kód

jQuery("input[name="newstate"]").change(function(){
if(jQuery(this).attr("checked")) {
jQuery("input[name="new-state-name"]").show();
} else {
jQuery("input[name="new-state-name"]").hide();
}
});

Ale jquery lint dáva nasledujúcu správu.

Rovnaký selektor by ste mali použiť iba viackrát, ak viete, že vrátená kolekcia bude iná. Napríklad ak ste na stránku pridali viac prvkov, ktoré môžu vyhovovať selektoru

Ako môžem upraviť svoj kód, aby som odstránil túto správu

odpovede:

3 pre odpoveď č. 1

Na .toggle() metóda akceptuje booleovskú hodnotu pre showOrHide:

jQuery("input[name="newstate"]").change(function(){
// You can use this.checked instead of jQuery(this).attr("checked");
jQuery("input[name="new-state-name"]").toggle(this.checked);
});

Týmto spôsobom budete „ll vedieť že new-state-name stav zobrazenia vstupu vždy zodpovedá newstate vstup (tj. zobrazí sa pri kontrole bez ohľadu na predchádzajúci stav). Mám tým na mysli použitie toggle() bez showOrHide môžete riskovať, že newstate štát a new-state-name stav zobrazenia sa nesynchronizuje, ak napr. the new-state-name so stavom vstupu vstupu sa manipuluje zvonku newstate change() handler.


Samozrejme, výslednú množinu môžete tiež priradiť k dočasnej premennej, aby ste mohli vykonať výber iba raz:

jQuery("input[name="newstate"]").change(function(){
var newStateInput = jQuery("input[name="new-state-name"]");
if(this.checked) {
newStateInput.show();
// ... more here
} else {
newStateInput.hide();
// ... and/or here
}
});

ak máte v úmysle urobiť viac, ako ukázať / skryť.


UPRAVIŤ
Ojoj, nešťastný preklep. show() by mala byť toggle() v prvom riešení.


1 pre odpoveď č. 2
jQuery("input[name="newstate"]").change(function(){
jQuery("input[name="new-state-name"]").toggle();
});