2

ボタンをクリックすると、特定のクラスを持つ特定の要素にスクロールするjqueryスクリプトがあります。

ボタン「次へ」をクリックすると、長いテキスト内にあるクラス「ハイライト」の最初の要素にスクロールするようにしました。

私の真の必要性は、そのスクリプトをセットアップまたはアップグレードして、「前へ」ボタンと「次へ」ボタンをクリックしたときに同じクラスの要素から要素へとナビゲートできるようにすることです。これまでのところ、指定されたクラスと、次のボタンのみが機能する前のボタンと次のボタンを持つ最初の要素にのみスクロールするこのスクリプトがあります。

こんなに簡単なスクリプトで、そんなことができるのだろうか？または、他のプラグインを使用する必要があります。

これが今までの私の状況 ですFiddle。

html には多くのテキストがあり、jsfiddle のリンクで表示できます... ここでは "..." に置き換えます。

<div class="navigation">
   <a href="#" id="prev">Previous</a>
   <br>
   <a href="#" id="next">Next</a>
</div>
<div class="demo-container">
   <p>
      ...
      <span class="highlight">ipsum</span> 
      ...
      <span class="highlight">Duis</span> 
      ...
      <span class="highlight">convallis</span> 
      ...
      <span class="highlight">blandit</span>
      ...
      <span class="highlight">Sed</span>
      ....
   </p>
</div>

脚本：

/**  scroll to element function **/
function scrollToElement(selector, time, verticalOffset) {
    time = typeof (time) != 'undefined' ? time : 500;
    verticalOffset = typeof (verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $(selector);
    offset = element.offset();
    offsetTop = offset.top + verticalOffset;
    $('html, body').animate({
        scrollTop: offsetTop
    }, time);
}

/**document ready**/
$(document).ready(function () {

    /* scroll to -150px before .highlight with animation time of 1000ms */
    $('#next').click(function (e) {
        e.preventDefault();
        scrollToElement('.highlight', 1000, -150);
    });
});

CSS:

.highlight{
  background-color:red;
}

.navigation{
     position:fixed;
     background: #FFFFFF;
     padding:5px;
     border: 1px solid;
}

私のjsfiddleを自由に編集できます。

どんな助けでも大歓迎です！

4

1 に答える 1

6

このような単純なカウンターを追加して、:nth-childセレクターを使用できます。

var count = 0;
$('#next').click(function (e) {
    count++;
    e.preventDefault();
    scrollToElement('.highlight:nth-child(' + count + ')', 1000, -150);
});

アップデート：

これにいくつかのダイナミズムを追加するには (.highlightそこにいくつの要素があるかわからないため)..次のようなことができます。

count = 0;
var max_length = $('.highlight').length;

$('#next').click(function (e) {
    e.preventDefault();
    if (count < max_length) {
        count++;
    } 
    else {
        count = 1;
        alert("reached start point");
    }

    scrollToElement('.highlight:nth-child(' + count + ')', 1000, -150);
    .
    .
    .

アップデート：

その場合は、別の方法でクリック イベントを処理するようにお伝えしたいと思います。

だから、あなた.click()は次のようになります、

$('.navigation a').click(function (e) {
    e.preventDefault();
    var id = $(this).prop('id');
    if(id === "next"){
         if (count < max_length) {
            count++;
         } else {
            count = 1;
            alert("reached start point");
         }
    }
    else{
         if (count > 1) {
            count--;
         } else {
            count = max_length;
            alert("reached start point");
         }            
    }
    scrollToElement('.highlight:nth-child(' + count + ')', 1000, -150);
});

リンクのテスト

テスト リンク 2

テスト リンク 3

于 2013-06-17T08:32:09.643 に答える