使用 jQuery 选择器 - ScrollTo答案

【问题标题】：Working with jQuery selectors - ScrollTo使用 jQuery 选择器 - ScrollTo
【发布时间】：2009-07-09 00:15:24
【问题描述】：

我正在使用 jQuery ScolTO 插件：http://demos.flesler.com/jquery/scrollTo/ 在此站点：www.imfrom.me

我有上下导航的箭头，现在我正在使用：

    $('.down_stream').click(function(){
        $.scrollTo( '#stream', 1500, {easing:'easeOutElastic'} );       
    });

因此，单击 .down_stream 转到#stream，也就是向下箭头，带您进入流媒体。我一直在尝试阅读并找出一个 jQuery 选择器来处理它以移动到 NEXT 段，而无需复制/粘贴该 sn-p 15 次以上的上下移动。

我什么都想不通。每个段都包含在这个块中：

<div id="stream" class="box">
        <div class="grid_12 arrow up_home">
            &uarr;
        </div>
        <div class="grid_2"><div class="number-heading">01.</div></div>
        <div class="grid_10">
            <h2 class="content_title">what's been new?</h2>

            <p>Blah blah blah blah...</p>
        </div>
        <div class="grid_12 arrow down_about">
            &darr;
        </div>
    </div><!-- end strean -->

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

不是 jQuery 专家，但我会试一试。如果我理解正确，每次单击向上/向下箭头时，“#stream”部分都必须更改。所以每个 div 都会有不同的 id，你需要将它们提供给这个小 sn-p 以让它滚动吗？

使用数组和整数 var 来跟踪在数组中移动的方式。

//initialize the array w/ your 15 div names
var divNames = ["#stream", "#nextDivName", "#andTheNext", "#yetAnotherDivName"];

var index = 0;

function moveUp()
{
  if((index - 1) >= 0){index--;}
  move(index);
}
function moveDown()
{
  if((index + 1) < (divNames.length)){index++;}
  move(index);
}
function move(p_Index)
{
   $.scrollTo( divNames[p_Index], 1500, {easing:'easeOutElastic'} );
}

按钮点击现在调用 moveUp() 和 moveDown() 函数。

希望对您有所帮助。

【讨论】：