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

make jQuery slider navigation only affect closest class

本文关键字：影响 最近 导航 jQuery      更新时间：2024-06-12

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

我的结构是这样的：

类别为category-wrapper 的div

--类别为product-nav 的div

----类为rightarrow-nav的div和类为leftarrow-nav的div。这两者都应该控制.product-wrapper

--类别为product-wrapper 的div

正如您从fiddle示例中看到的，左箭头和右箭头当前控制两个product-wrappers。我需要知道如何更改代码，使其仅影响单击的右箭头或左箭头的类别包装中的产品包装。此处的Fiddle示例我认为这与这条线有关：

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

您的脚本同时引用所有箭头，您需要指定实际单击的箭头所在的位置，并将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/

相关文章：