Question

我对我开发的jQuery滑块有一点问题。

我的结构是这样的：

div与class-wrapper

类

- div与product-nav类

----使用rightarrow-nav类进行div，使用class leftarrow-nav进行div。这两者都应该控制.product-wrapper

- div与product-wrapper类

从小提琴示例中可以看出，左右箭头目前控制着两个产品包装器。我需要知道如何更改代码以仅影响单击的右箭头或左箭头的类别包装器中的product-wrapper。 Fiddle example here 我认为这与这一行有关：

$('.rightarrow-nav').parent(".product-nav").next(".product-wrapper").scrollTo(element, 800, {

Answer 1

您的脚本同时指向所有箭头，您需要指定实际被单击的箭头，并将scrollToPosition函数限制为该元素。现在它指的是所有的按钮，所以很明显它们会滚动所有的div，无论点击哪一个。

首先，当你调用scrollToPosition时，你需要告诉它实际点击了哪个按钮。您可以通过将$(this)作为另一个参数传递来实现。

scrollToPosition(posts[position += 1], $(this));

然后，在函数中，接受该参数并将代码仅应用于该元素（myel）。

function scrollToPosition(element, myel) {
event.preventDefault()
    if (element !== undefined) {
           $(myel).parent(".product-nav").next(".product-wrapper").scrollTo(element, 800, {
          //  $(".product-nav").parent(".category-wrapper").find('.product-wrapper').scrollTo(element, 800, {
            margin: true
        });
    }
}

请在此处查看更新的小提琴：http://jsfiddle.net/ygEU6/3/

使jQuery滑块导航仅影响最近的类

1 个答案: