1

入力に単語を挿入する際に検索できる強調表示された単語をスクロールするためのjqueryスクリプトがあります。すべてが機能していますが、奇妙な方法です。#demo-container がスクリプトでアニメーション化されるように設定したので、データを入力して次へをクリックすると、彼のスクロールが次のデータに移動します。しかし、スクリプトに問題があるようです...最初に次にヒットすると強調表示されたデータが表示されますが、2回目は次の単語にスクロールする代わりに少し後ろに移動し、3回目は2番目の単語をスキップします3番目に移動します...

何が問題なのかわかりません。jsfiddle の状況は次のとおりです: http://jsfiddle.net/dzorz/UF7VJ/

html (テキストの大部分なし):

<div class="dock">
<input type="text" class="span3" id="field1" name="field1" value="term1 term2 term3 term4">
    <a class="btn btn-primary btn-mini" id="prev1" href="#"><i class="icon-arrow-up icon-white"> </i></a> 
    <a class="btn btn-primary btn-mini" id="next1" href="#"><i class="icon-arrow-down icon-white"></i></a>
</div>

<div id="outer">    
<div id="demo-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus aliquam elementum. 
Nam adipiscing rhoncus consequat. Nam sed dolor ac risus sodales auctor id sit amet quam. 
Aliquam posuere enim ipsum. Aliquam malesuada erat et lectus venenatis, eu ultricies sapien 
convallis. Morbi eu vestibulum leo. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Aliquam neque augue, placerat in dignissim non, faucibus id sapien. Sed 
vitae ligula venenatis, blandit orci in, hendrerit ipsum. In nec sem in metus hendrerit sodales.
 Cras at lectus id elit orn
</div>
</div>

脚本：

    // disable highlighting if empty
    if (searchTerm) {
        var terms = searchTerm.split(/\s+/);
        $.each(terms, function (_, term) {
            // highlight the new term
            term = term.trim();
            if (term != "") $('#demo-container').highlight(term, 'highlight1');
        });

    }
}).triggerHandler('change');

});

/**  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;
    $('#demo-container').animate({
        scrollTop: offsetTop
    }, time);
}

/**document ready**/
$(document).ready(function () {
    count = 0;
    var max_length = $('.highlight1').length;
    /* scroll to 150px before .highlight with animation time of 400ms */
    $('#next1').click(function (e) {
        if (count < max_length) {
            count++;
        } else {
            count = 1;
        }
        e.preventDefault();
        scrollToElement('.highlight1:nth-child(' + count + ')', 400, -150);
    });

    $('#prev1').click(function (e) {
        if (count > 1) {
            count--;
        } else {
            count = max_length;
        }
        e.preventDefault();
        scrollToElement('.highlight1:nth-child(' + count + ')', 400, -150);
    })
});

CSS:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

#outer{
width:500px;
height:300px;
padding-top:50px;
 }
#demo-container{
width:100%;
height:100%;
 overflow:auto;
}

.dock{
position:fixed;
background:#FFFFFF;    
}

.highlight1 {
-moz-border-radius: 5px;
/* FF1+ */
-webkit-border-radius: 5px;
/* Saf3-4 */
border-radius: 5px;
/* Opera 10.5, IE 9, Saf5, Chrome */
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
/* FF3.5+ */
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
/* Saf3.0+, Chrome */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
/* Opera 10.5+, IE 9.0 */
}

.highlight1{
background-color: #fff34d;
}

.highlight1 {
padding:1px 4px;
margin:0 -4px;
}

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

4

1 に答える 1