Question

我有一个按钮，当单击它时，它会将默认的2列网格更改为单个列网格。此单击事件后，列中包含元素的Y偏移位置会发生变化。

我需要知道更新的Y偏移位置，以便能够在列网格更改后立即scrollTop到某个元素，但我似乎没有让代码正常工作，也不确定我的结构是否正常是重构的正确方法，以保持它们全部同步。

var lastTrigger;
var target = $('#' + lastTrigger);

$('button').click(function () {
    $('.row > div').toggleClass('col-xs-6').toggleClass('col-xs-12');
    lastTrigger = $(this).closest('div').attr('id');
    scrollView(updateOffset);
});

function updateOffset() {
     var currentOffset = target.offset().top; 
     return currentOffset;
}

function scrollView() {
    $('html,body').animate({
        scrollTop: currentOffset
    }, 1000);
}

Answer 1

$('button').click(function () {
    $('.row > div').toggleClass('col-xs-6').toggleClass('col-xs-12');
    var target = $(this).closest('div');
    scrollView(updateOffset(target));
});

function updateOffset(target) {
     var currentOffset = target.offset().top; 
     return currentOffset;
}

function scrollView(currentOffset) {
    $('html,body').animate({
        scrollTop: currentOffset
    }, 1000);
}

Answer 2

这里的问题是，当您点击按钮时，target没有被更新，因为lastTrigger在变量初始化时未定义。因此，当您在事件侦听器中定义lastTrigger时，没有任何反应。

I created a fiddle通过在初始化target之后初始化lastTrigger并相应地更新scrollTop来解决此问题。

var lastTrigger;
var target;

$('button').click(function () {
    $('.row > div').toggleClass('col-xs-6').toggleClass('col-xs-12');
    lastTrigger = $(this).closest('div').attr('id');
    scrollView();
});

function updateOffset() {
     target = $('#' + lastTrigger);
     var currentOffset = target.offset().top; 
     return currentOffset;
}

function scrollView() {
    $('html,body').animate({
        scrollTop: updateOffset()
    }, 1000);
}

我希望能解决你的问题。

使用更新的偏移位置

2 个答案: