单击到下一个 DIV

Question

希望有人能帮帮我。

我正在开发一个遍历我页面上所有 div（A、B 和 C）的 javascript。

现在它从 div A 到 B 和 B 到 C 动画并从顶部重新启动。到目前为止一切顺利！

但是.. 单击 div 外部的固定对象（蓝色方块“.x”）时，我希望获得相同的效果。就像一个导航——而不是 div 本身。

看看，如果您对如何实现这一目标有任何建议，请告诉我。

alert('jsfiddle.net')http://jsfiddle.net/RB7q5/25/

谢谢 x

Answer 1

您只需要在点击 .x 时触发 .wrap 点击功能。唯一的技巧是将 $next 设置为正确的项目，这样您就知道要点击哪个项目了。

$(window).ready(function () {
  var $next = $('.wrap').eq(0);
  $('.x').click(function() {
    console.log($next);
    $next.trigger('click');
  });
  $('.wrap').click(function (e) {
    e.preventDefault();
    var ind = $(this).closest('.wrap').index('.wrap');
    var $containers = $('.wrap');
    $next = $containers.eq(++ind);
    if ($next.length) {
        var where = $next.offset().top;
    } else {
        var where = $containers.filter(":first").offset().top;
        $next = $('.wrap').eq(0);
    }
    $('body, html').animate({
        scrollTop: where
    })
  })
});

http://jsfiddle.net/RB7q5/26/