2

我正在我的应用程序中实现一个标记/锚点系统。我经常使用套接字编程从服务器获取一堆数据。

我在这里用小提琴做了一个演示，我遇到的困难是我想滚动到所有选中的复选框，就像你点击下一个或上一个时文本搜索滚动到匹配一样。如果用户单击“下一步”按钮，它应该转到下一个选中的复选框。同样，如果用户按下“上一个”按钮，它会转到上一个。

这是我的小提琴：http: //jsfiddle.net/naveennsit/TnTj9/7/

HTML：

<div>
    <button id="next">next</button>
    <button id="previous">previous</button>
</div>
<div id="left">
    <div class='cb'>
        <input type="checkbox" />
    </div>
</div>
<div id="realTimeContents" class="left realtimeContend_h"><!-- this gets populated --></div>

JS：

$(function () {
    var h = -1;
    setInterval(function () {
        var newHeight = $('#realTimeContents').append("Hiiiii. is div").height();
        if (h == -1) h = newHeight;
        if (h != newHeight) {
            //    alert(newHeight);
            h = newHeight;
            $("#left").append("<div class='cb'><input type=\"checkbox\" /></div>");
        }
    }, 1000);
});

我在查找/滚动到复选框方面并没有真正取得任何进展，但我认为可以使用这样的东西：

 scrollTop: $('.match').eq(searchIndex).get(0).offsetTop
4

1 回答 1

2

这是你想要的吗？我创建了一个checked数组，其中包含选中的复选框的索引。然后，当单击下一个或上一个时，我更改了current跟踪当前框以及滚动到该特定框的 var。

小提琴

var checked = [];
var current = 0;
$("#left").on("click", "input", function () {
    checked = [];
    var $cbs = $("#left").find("input");
    $("#currRow").text($cbs.index(this));
    $cbs.filter(":checked").each(function () {
        checked.push($cbs.index(this));
    });
});

$("#next").on("click", function () {
    var idx = (checked.indexOf(current) + 1) % checked.length;
    gotoBox(idx);
});

$("#previous").on("click", function () {
    var idx = (checked.indexOf(current) - 1);
    if (idx < 0) idx = checked.length - 1;
    gotoBox(idx);
});

function gotoBox(idx) {
    current = checked[idx];
    $("#currRow").text(current);
    var $box = $("#left").find("input").eq(current);
    var $content = $("#content");
    $content.scrollTop(
    $box.offset().top - $content.offset().top + $content.scrollTop());
}

注意：我加快了间隔，以便可以更快地测试更大的内容。

于 2013-08-30T19:00:04.100 回答