Wie kann ich dieses JavaScript in eine Funktion umwandeln? Ist es bereits eine Funktion? Ein paar sehr grundlegende Fragen zur JavaScript-Struktur.

Question

Ich lerne JavaScript und versuche folgendes anzupassen:

$('#myform').change(function() {
    if ($('#sv_I4b').attr('checked')||$('#sv_I4c').attr('checked')){
        $('#sv_I5').removeClass('hidden');
    } else {
        $('#sv_I5').addClass('hidden');
    }
});

Um eine Funktion mit einem Namen zu sein, die ich bei verschiedenen Ereignissen aufrufen kann, wie z.B. beim Laden der Seite usw.

Ich verstehe noch nicht jedes Element vollständig, aber ich weiß, dass:

    if ($('#sv_I4b').attr('checked')||$('#sv_I4c').attr('checked')){
        $('#sv_I5').removeClass('hidden');
    } else {
        $('#sv_I5').addClass('hidden');
    }

den Kern der "Logik" der Funktion darstellt: if (Bedingung) {dann dies} sonst {das}

und mehr oder weniger verstehe, was dort passiert. Das lässt uns beim begrenzenden JavaScript (gibt es eine bessere Terminologie dafür?) zurück:

$('#myform').change(function() {...});

Meine Fragen (sind die folgenden wahr usw):

• Das Dollarzeichen deutet meiner Meinung nach darauf hin, dass es jQuery ist
• Die ID myform bezieht sich offensichtlich auf die Ereignisse innerhalb dieses Formulars (Namensraum?)
• .change scheint ein Auslöser zu sein, der auf ... Änderungen in #myform hört? Wird also jedes Mal, wenn eine Änderung in #myform stattfindet, dies ausgeführt? Das erscheint ineffizient
• function() Ich verstehe noch nicht, was eine anonyme oder leere Funktion macht, definiert nur, was in {} enthalten ist, als Funktion?

Mein Ziel: etwas wie folgt zu haben

function myfunction()
{
if ($('#sv_I4b').attr('checked')||$('#sv_I4c').attr('checked')){
        $('#sv_I5').removeClass('hidden');
    } else {
        $('#sv_I5').addClass('hidden');
    }
}

und dann

$(function() {myfunction});

so kann ich diese Funktion beim Laden der Seite aufrufen, möchte aber nicht die Funktionalität verlieren, die die .change-Syntax mir bietet (dass sie sich ändert, wenn der Benutzer mit den Elementen auf der Seite interagiert).

Entschuldigung für das allgemeine und umständliche Maß an Unwissenheit

Answer 1

Sie haben richtig geraten, wie die Funktion richtig definiert wird — das heißt,

function myfunction()
{
if ($('#sv_I4b').attr('checked')||$('#sv_I4c').attr('checked')){
        $('#sv_I5').removeClass('hidden');
    } else {
        $('#sv_I5').addClass('hidden');
    }
}

funktioniert einwandfrei. Allerdings das hier:

$(function() {myfunction});

Sollte so geschrieben werden:

$(myfunction);  // Wird beim Laden der Seite ausgeführt.
$('#myform').change(myfunction);  // ...und wird auch ausgeführt, wenn sich das Formular ändert.

Allerdings wird die zweite Zeile tatsächlich erst funktionieren, wenn die Seite geladen wurde, es sei denn, das Formular existiert zum Zeitpunkt des Skriptaufrufs, also möchten Sie es vielleicht so ändern:

$(function() {  // Beim Laden der Seite führen Sie diese anonyme Funktion aus:
    myfunction();  // Führen Sie die Funktion jetzt aus (wobei jetzt, zu diesem Zeitpunkt, das Laden der Seite bedeutet).
    $('#myform').change(myfunction);  // ... sowie wenn sich das Formular ändert.
});

Answer 2

• $ ist die Kurzschreibweise für jQuery und gibt im Grunde jedem Funktionen den Namensraum des jQuery-Frameworks.
• my_form ist ein DOM-Selektor. $('#my_form') wird das übereinstimmende DOM-Element als jQuery-Objekt umschließen und nützliche Methoden und Eigenschaften hinzufügen.
• .change() ist ein Ereignis-Listener, der, wie Sie vermuten, Änderungsereignisse auf diesem jQuery-Objekt überwacht. Es ist etwas ineffizient - schauen Sie sich stattdessen .on() an.
• Das nützlichste Verhalten einer anonymen Funktion (Closure) besteht darin, einen privaten Bereich zu erstellen, etwas, das JavaScript sonst nicht bietet.