Wie man dies als Funktion schreibt

Question

Ich bin eine Art von neuen zu Jquery und ich habe ein Kippschalter Typ Jquery Stück unten geschrieben. Ich frage mich nur, was wäre ein besserer Weg, dies zu schreiben, so dass es wiederverwendbar ist.

Es funktioniert folgendermaßen. Klicken Sie auf eine der Optionen für den Optionsbetrag (sie haben die Klasse "nOther"), dann wird das andere Textfeld "Betrag" deaktiviert. Klicken Sie jedoch auf das andere Optionsfeld und das Textfeld wird aktiviert.

$("input[type='radio'][name='giftType'][value='Other']").click(function(){
        $("input[type='text'][name='otherAmount']").removeAttr('disabled');
});
$("input[type='radio'][name='giftType'][class='nOther']").click(function(){
        $("input[type='text'][name='otherAmount']").attr('disabled', 'disabled');
});

Offensichtlich gibt es einen besseren Weg, dies zu schreiben, damit ich es wiederverwenden kann

Etwas wie function('value', 'class'){ ... }

Für jede Hilfe sind wir sehr dankbar.

Answer 1

Versuchen Sie dies mit einem einfachen Selektor.

$("input[name='giftType']").click(function(){
    $("input[name='otherAmount']").prop('disabled', ($(this).val() != 'Other'));
});

Anmerkung: Ich verwende prop um das Textfeld zu aktivieren/deaktivieren, was der empfohlene Weg ist, um Eigenschaften von Elementen festzulegen.

Answer 2

Wie wäre es damit:

$('input[name="giftType"]').click(function(){
  $('input[name="otherAmount"]').attr('disabled',($(this).val() != 'Other'))
});

Damit wird die Gruppe der Optionsfelder mit dem Namen "giftType" überprüft, und wenn dasjenige mit dem Wert "Other" ausgewählt ist, wird das Textfeld mit dem Namen "otherAmount" deaktiviert, andernfalls ist es nicht deaktiviert. Hier ist eine schnelle jsFiddle zu testen.

Aktualisierung der Rückwärtsbedingungsprüfung (== zu !=)

Answer 3

Zunächst ein paar allgemeine Hinweise:

1. jQuery-Attribut-Selektoren gehören zu den langsamsten, so versuchen und verwenden tagname, Klasse und ids, wo möglich.
2. Enabled ist kein gültiges Attribut, da jedes nicht deaktivierte Element standardmäßig aktiviert ist. Wenn Sie später in Ihrem Code prüfen wollen, ob ein Element aktiviert ist, können Sie $("input:not([disabled])") verwenden.
3. Sie könnten das folgende Verfahren effizienter gestalten, wenn Sie auch ein enthaltendes Element angeben könnten, d. h. Sie würden mit $("#myContainerId").find("input[type='radio']") beginnen
4. Die Einbettung in eine Funktion ist nicht unbedingt eine bessere Lösung. Je nachdem, wie komplex der Code Ihrer Website ist, gibt es eine Reihe von Möglichkeiten, Ihren Code zu organisieren, um ihn übersichtlich zu halten. Aber im Allgemeinen gilt: Wenn ein Teil des Codes mehr als einmal pro Seite aufgerufen wird, sollte er in einer Funktion stehen.
5. Ich habe jedoch Ihren Code in einem Jquery anonyme Funktion Wrapper, die den Code läuft verzögert, bis nach dem DOM geladen hat (und hat den zusätzlichen Vorteil (aufgrund alles in den Bereich der Funktion gewickelt wird) von nicht Hinzufügen von globalen Variablen zu den DOM

f

$(function() {
   var otherAmountInputs = $("input[type='text'][name='otherAmount']"); //cache this expensive query
  $("input[type='radio']")
   .filter("[name='giftType'][value='Other']").click(function(){
        otherAmountInputs.removeAttr('disabled');
   })
   .end()
   .filter(".nOther[name='giftType']").click(function(){
        otherAmountInputs.attr('disabled', 'disabled');
   });
});