0

我需要一些帮助。我在同一页面上有 3 或 4 个 jScrollPanes，像这样创建它们：

@foreach (var thing in Model.things)
{
    <div class="scrollPanes">
        <ul>
            <li>Model.Item</li>
        </ul>
     </div>
}

我的 CSS 就像（这些窗格水平滚动）：

.scrollPanes
{
    overflow: auto;
    width: 100%;
}

ul
{
    list-style: none;
    height: 50px;
    width: 1000px;
    margin: 0;
    padding: 0;
}

这是我如何初始化 jScrollPane

var settings = { hideFocus: true };
// Notice how all the elements with class "scrollPane" become a jscrollpane
var pane = $('.scrollPanes').jScrollPane(settings);
var api = pane.data('jsp');
api.reinitialise();

所以这使得每一个滚动窗格，它们都像我期望的那样工作得很好。

我想做的是使用或以相等的增量滚动所有元素jScrollPane().scrollToX(xxx);jScrollPane().scrollByX(xxx);

当我调用该方法时：

api.scrollByX(200); api.reinitialise();

这行得通，但它只滚动第一个列表，而不是后面的任何列表。

我正在寻求让它平等地滚动所有这些，我非常感谢任何帮助。

谢谢

4

3 回答 3

1

1）添加到每个窗格的个人ID

2) 编写自己的函数 PanesMover(X) 用于一次更改所有窗格。在函数中，将每个窗格移动到同一个 X 上（作为函数参数接收），分别按其 ID

3) 调用您的文档 PanesMover(X)，其中 X -是移动参数，将应用于所有窗格。

于 2012-05-02T00:20:15.120 回答
1

您的原始代码不起作用的原因是 .data() 方法的工作原理。请参阅http://api.jquery.com/data/：“在命名数据存储中为 jQuery 集合中的第一个元素返回值...”当您调用 pane.data('jsp') 时，它仅返回 API对于集合中的第一个元素（这就是为什么只有第一个窗格为您滚动）。要为集合中的每个元素在 API 上运行方法，您需要逐个循环遍历这些元素。您可以使用 .each() 来做到这一点

$(".jpanes").each(function() {
    $(this).data("jsp").scrollByX(200);
});

或者，如果您计划重复调用 API，则可以获取 API 数组以在需要时调用，然后使用 for 循环。

// Store an array of APIs for each element
var apis = $(".jpanes").map(function() {
    return $(this).data("jsp");
}).get();

// Call an API method for each element
for (var i = 0, api; api = apis[i]; i++) {
    api.scrollByX(200);
}
于 2012-05-02T22:26:01.417 回答
0

这是我在回答 #1 之后以简化形式所做的。

首先，我在我想同时滚动的所有元素上附加了唯一的 ID，但它们都使用相同的类。

@{ int paneID = 0; }
@foreach (var thing in Model.things)
{
     <div id="@paneID" class="jpanes">
        <ul>
            <li>Item</li>
        </ul>
     </div>
     paneID++;
}

然后我像以前一样使用 jScrollPane 初始化窗格：

$('.jpanes').jScrollPane();

然后我使用数组为每个元素的唯一 ID 初始化了一个单独的 jScrollPane API，如下所示：

var jspAPI = new Array();

$('.jpanes').each(function(index) {
    jspAPI[index] = $('#'+$(this).attr('id')).data('jsp');
}

就是这样，当我想滚动它们时，我循环遍历所有内容

for (var i=0; i < jspAPI.length; i++) {
    jspAPI[i].scrollByX(10);
}

我很惊讶以前找不到任何人想要这样做并寻求帮助，但希望这对其他人有所帮助。

于 2012-05-02T20:20:54.467 回答