Optimieren Sie den jQuery-Selektor, um das korrekte Eingabeelement als Ziel festzulegen

  • Ich habe eine Funktion, die einen Wert von einer Auswahl in eine Eingabe schreibt. Ich benutze eine Live-Funktion ("change", Funktion zum Auslösen.)

     if ($(this).val( ) == 'MyValue') {$(".my_input").val(VarValue);}
     

    Das funktioniert gut, aber ich brauche es um auf die nächste Eingabe zu zielen, so dass sie nur auf diese eine Eingabe schreibt und nicht auf alle. Was ich unten versucht habe, funktioniert nicht. Bitte helfen Sie, wenn möglich, danke.

     [pre> if ($(this).val( ) == 'MyValue') {$(this).closest(".my_input").val(VarValue);}
     

    UPDATE

    Hier ist ein Link zum Jsfiddle, bitte beachten Sie, die Funktionalität ist funktioniert hier nicht, aber Sie können meine HTML-Datei sehen. http://jsfiddle.net/clintongreen/9x6kv/

    22 November 2011
    Clinton Green
4 answers
  • Ihre Geige, aber es funktioniert: Klicken Sie hier

    Sie hatten ein Problem mit Ihrer js - Änderung:

     $(".clone_dept").live("change", function() { //<-- not really sure why live isn't working
        if ($(this).val() == 'Dept #1') {$(".clone_attendees").val(dept_1);}
        if ($(this).val() == 'Dept #2') {$(".clone_attendees").val(dept_1);}
        if ($(this).val() == 'Dept #3') {$(".clone_attendees").val(dept_1);}
        if ($(this).val() == 'Dept #4') {$(".clone_attendees").val(dept_1);}
        if ($(this).val() == 'Dept #5') {$(".clone_attendees").val(dept_1);}
        }).change(); // trigger once if needed
    }); // <-- This shouldnt be here
     

    in:

     $(".clone_dept").change(function() {
        if ($(this).val() == 'Dept #1') {$(".clone_attendees").val(dept_1);}
        if ($(this).val() == 'Dept #2') {$(".clone_attendees").val(dept_2);}
        if ($(this).val() == 'Dept #3') {$(".clone_attendees").val(dept_3);}
        if ($(this).val() == 'Dept #4') {$(".clone_attendees").val(dept_4);}
        if ($(this).val() == 'Dept #5') {$(".clone_attendees").val(dept_5);}
    }).change(); // trigger once if needed
     

    Obwohl dies nicht unbedingt darauf ankommt, wie der nächstliegende Eingang ausgewählt wird. Im Fall Ihrer Geige ist es das einzige Element, das diese Klasse verwendet. Wenn diese Zeilenstruktur kopiert und wiederverwendet werden soll, verwenden Sie diese Option, um die richtige Eingabe auszuwählen.

     if($(this).val() == 'Dept #1') {$(this).parent().next("td").children(".clone_attendees").val(dept_1);}
     

    Bearbeiten : Besser noch, verwenden Sie ein Array, um den richtigen Wert zuzuweisen, anstatt fünf Zeilen mit if-Statements zu verwenden.

     var dept = ["Person #1, Person #2, Person #3, Person #4, Person #5","Person #6, Person #7, Person #8, Person #9, Person #10","Finance Persons","IT Persons","Marketing Persons"];
     

    Fügen Sie den Option-Tags Werte hinzu

     <option value=0>Dept #1</option>
     

    und dann

     $(".clone_dept").change(function() {
        if($(this).val() == 'Dept #1') {
            $(this).parent()
            .next("td")
            .children(".clone_attendees")
            .val(dept[$(this).val()])
        }
    }).change(); // trigger once if needed
     
    22 November 2011
    sicksedikgat
  • UPDATE: Endgültiger Code (falls jemand benötigt)

     $(document).ready(function(){
    var $theme = $("#clonned").clone();
    // The Function in Question
    var dept_1 = "Person #1, Person #2, Person #3, Person #4, Person #5";
    var dept_2 = "Person #6, Person #7, Person #8, Person #9, Person #10";
    var dept_3 = "Finance Persons";
    var dept_4 = "IT Persons";
    var dept_5 = "Marketing Persons";
    
    $(".clone_dept").live("change", function() {
        if ($(this).val() == 'Dept #1') {
            $(this).closest("tr").find("td:eq(1) .clone_attendees").val(dept_1);
        }
        if ($(this).val() == 'Dept #2') {
            $(this).closest("tr").find("td:eq(1) .clone_attendees").val(dept_2);
        }
        if ($(this).val() == 'Dept #3') {
            $(this).closest("tr").find("td:eq(1) .clone_attendees").val(dept_3);
        }
        if ($(this).val() == 'Dept #4') {
            $(this).closest("tr").find("td:eq(1) .clone_attendees").val(dept_4);
        }
        if ($(this).val() == 'Dept #5') {
            $(this).closest("tr").find("td:eq(1) .clone_attendees").val(dept_5);
        }
    }).change(); // trigger once if needed
    // Clone Function
    $(".tr_clone_add").live('click', function() {
        var $newone = $theme.clone();
        $newone.attr("id", "clonned"+Math.floor(Math.random()*11));
        $newone.appendTo('.table_clone');
    });
    });
     
    22 November 2011
    Alper
  • Wenn Sie sicher sind, dass es mindestens eine gibt, können Sie

     if ($(this).val( ) == 'MyValue') {$(".my_input").eq(0).val(VarValue);}
     

    das versuchen erhält die erste aus dem Satz, hat aber keine Ahnung von "nächstgelegenen"

    ersten Geschwistern? Versuchen Sie,

     if ($(this).val( ) == 'MyValue') {$(this).siblings(".my_input").eq(0).val(VarValue);}
     

    , aber dies wird alle anzeigen, die ohnehin VOR Ihnen erscheinen. hängt ganz davon ab, was "am nächsten" bedeutet

    22 November 2011
    Luke Schafer
  • Angenommen, die Eingabe ist die nächste im DOM. Dies sollte funktionieren:

     if ($(this).val( ) == 'MyValue') {$(this).next().val(VarValue);}
     
    22 November 2011
    Matt H