参照エラー：変数が定義されていません

Question

"nthchild"という変数がありますvar nthchild = ($(ui.selected).index() + 1); これは、クラスが選択されているリスト項目のn番目の子を返します。私はコンソールにもそれを記録し、それは正常に動作します。しかし、私はこの変数を使用しようとすると動作しません。

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

したがって、セクションには200pxの余白があります。しかしコンソールが

Uncaught ReferenceError: nthchild is not defined

私にエラーを与えているあなたは、あなたがそれを使用しようとする場所の範囲外nthchildを定義しているため、問題がある。この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

に私のコードを見つけることができます。これを修正するには、が更新されたときに実行されるように、:nth-childセレクタをselectedコールバックに入れます。

また、.style.marginTopはjQueryオブジェクトでは使用できないネイティブエレメントのプロパティです。代わりにcss()メソッドを使用するか、外部スタイルシートのルールにスタイルを置き、addClass()を使用することをお勧めします。これを試してください：

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

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