Question

我正在寻找一种方法来在悬停元素之前获取元素的宽度。

我尝试过：

$('ul li').hover(function() {
$(this).prevAll().each(function() {
    var margin = $(this).width();
});
$(this).css('margin-left', margin + 'px');
});

但控制台说：

未捕获的ReferenceError：未定义边距

任何解决方案？感谢

Answer 1

我正在寻找一种方法，以便在悬停元素之前获取元素的宽度。

您需要在循环外部初始化var，只需添加值：

$('ul li').hover(function() {
  var margin = 0;
  $(this).prevAll().each(function() {
    margin += $(this).width();
  });
  $(this).css('margin-left', margin + 'px');
});

Answer 2

在每个函数之外访问margin变量将导致未定义。将变量存储在每个函数范围之外，以便您可以在范围之外访问它：

$('ul li').hover(function() {
  var margin;
  $(this).prevAll().each(function() {
    margin = $(this).width();
  });
  $(this).css('margin-left', margin + 'px');
});

但是我可以在上面的例子中意识到，你不会得到列表边距 - 因此你要做的事情。所以，你可以这样使用：

$('ul li').hover(function() {
  var $this = $(this);//'li'
  $(this).prevAll().each(function() {
    var margin = $(this).width();
    $this.css('margin-left', margin + 'px');//margin on 'li'
  });
});

Answer 3

您不能在定义或设置值的范围之外使用保证金变量。

$('ul li').hover(function() {
    var that = this;
    $(that).prevAll().each(function() {
        var margin = $(this).width();
        $(this).css('margin-left', margin + 'px');
    });
});

Answer 4

您需要在定义边距变量的循环内定义边距。如果在函数/循环中定义了一个veriable，那么这个变量的'scope'就是它所包含的函数/循环。

$('ul li').hover(function() {
    $(this).prevAll().each(function() {
        var margin = $(this).width();
        $(this).css('margin-left', margin + 'px');
    });
});

如果你想在循环之外使用保证金，那么你需要在此之前定义它：

$('ul li').hover(function() {
    var margin = 0;
    $(this).prevAll().each(function() {
        margin = $(this).width();
    });
    $(this).css('margin-left', margin + 'px');
});

对于整页范围，请在执行任何操作之前进行定义：

var margin = 0;
$('ul li').hover(function() {
    $(this).prevAll().each(function() {
        margin = $(this).width();
    });
    $(this).css('margin-left', margin + 'px');
}); 

//margin can also be used here now.

我认为第一个解决方案就是你在这个例子中寻找的东西，但我已经给出了第二个解决方案，以防你再次遇到类似的东西。

宽度上一个元素jQuery

4 个答案: