javascript - 引用错误: undefined variable

我有一个名为“nthchild”的变量var nthchild = ($(ui.selected).index() + 1);这使我获得了选择了类别的列表项的第n个子项。我什至将其记录在控制台中，并且工作正常。但是，当我尝试使用此变量但它不起作用时。

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

因此，应为该部分提供200px的空白边距。但是控制台给我错误



您可以在此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";

最佳答案

问题是因为您在尝试使用nthchild的位置范围之外定义了它。要解决此问题，请将:nth-child选择器放置在selected回调中，以便在selectable更新时执行该选择器。

还要注意.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');
        }
    });
});