使用 jQuery offfset 定位 div - 代码仅适用于一个元素

Question

我正在尝试根据另一个元素的偏移位置使用CSS 'top'设置div的位置。 这个元素不是相邻的，也不是父/子元素，因此我必须使用 javascrip/jQuery。

我

遇到了以下代码，它非常适合我的第一个元素（从"mark2"检索偏移位置并为"side2"正确设置位置，但是当我复制"mark3"和"side3"的代码时，它不起作用。 任一代码块都是孤立工作的，但似乎相互冲突。 我重命名了所有变量，但仍然存在冲突。

如果有人能对此有所了解，将不胜感激！

    <script type="text/javascript">
    window.onload = function(event) {
    //Get
    var p = $("#mark2");
    var something = p.offset();
    //set
    $("#side2").css('top', something.top+'px');
    };
    window.onresize = function(event) {
    //Get
    var p = $("#mark2");
    var something = p.offset();
    //set
    $("#side2").css('top', something.top+'px');
    };
    </script>

    <script type="text/javascript">
    window.onload = function(event) {
    //Get
    var y = $("#mark3");
    var somethingelse = y.offset();
    //set
    $("#side3").css('top', somethingelse.top+'px');
    };
    window.onresize = function(event) {
    //Get
    var y = $("#mark3");
    var somethingelse = y.offset();
    //set
    $("#side3").css('top', somethingelse.top+'px');
    };
    </script>

Answer 1

每次

执行window.onload = something时，您都会覆盖该属性。

你需要一个事件处理程序，当你使用jQuery

时

$(window).on('load resize', function() {
    var p         = $("#mark2");
    var something = p.offset();
    $("#side2").css('top', something.top + 'px');

    var y             = $("#mark3");
    var somethingelse = y.offset();
    $("#side3").css('top', somethingelse.top+'px');
});

Answer 2

当您使用 = 设置事件侦听器的方式时，

它会覆盖以前的事件侦听器。解决此问题的最佳方法是在 jquery 事件中使用回调函数，如下所示：

$(window).on('load', function (event) {
  // Code goes here
});
$(window).on('resize', function (event) {
  // Code goes here
});

这应该允许每个事件有多个事件侦听器。