Reference Error: Variable ist nicht definiert

Question

Ich habe eine Variable namens "Nthchild" var nthchild = ($(ui.selected).index() + 1); Das gibt mir das N-Kind eines Listenelements mit der Klasse ausgewählt. Ich logge es sogar in der Konsole und es funktioniert gut. Allerdings, wenn ich versuche, diese Variable zu verwenden, aber es funktioniert nicht.

$("section:nth-child(" + nthchild + ")").style.marginTop = "200px"; 

So soll es dem Abschnitt ein margin-top von 200px geben. Aber die Konsole gibt mir den Fehler

Uncaught ReferenceError: nthchild is not defined

Sie können meinen Code auf dieser codepen

$(function() { 
    $("#selectable").selectable(); 
}); 

$(function() { 
    $("#selectable").selectable({ 
     selected: function(event, ui) { 
      var nthchild = ($(ui.selected).index() + 1); 
      console.log(nthchild); 
     } 
    }); 
}); 

$("section:nth-child(" + nthchild + ")").style.marginTop = "200px"; 

Answer 1

Das Problem finden ist, weil Sie nthchild außerhalb des Gültigkeitsbereichs der Lage definieren Sie versuchen, es zu benutzen. Um dies zu beheben Ort, um den :nth-child Selektor innerhalb des selected Rückrufs, damit er ausgeführt ist, wenn die selectable aktualisiert wird.

Beachten Sie auch, dass .style.marginTop eine Eigenschaft eines nativen Element ist, das auf einem jQuery-Objekt nicht verfügbar ist. Verwenden Sie stattdessen die css() Methode, oder besser noch, setzen Sie den Stil in der Regel in einem externen Stylesheet und addClass() verwenden. Versuchen Sie folgendes:

$(function() { 
    $("#selectable").selectable(); 

    $("#selectable").selectable({ 
     selected: function(event, ui) { 
      var nthchild = ($(ui.selected).index() + 1); 
      $("section:nth-child(" + nthchild + ")").css('marginTop', '200px'); 
     } 
    }); 
});