如何在同一页面的函数内重用jQuery脚本

Question

我制作了一个滑块，如果我使用 1 个滑块，一切正常。 当我使用 2 个滑块时出现问题。 分页和上一个/下一个箭头不能正常工作。他们指向第二个滑块。

这是我的脚本：

<script>
 $('.carmod17').each(function(){
 $(this).carouFredSel({ 
    responsive: true,
    pagination  : ".paginationbrand",                   
    prev: '.prev17',
    next: '.next17',
    auto: true,
    scroll: {
    duration: 1500,
    pauseOnHover: true  
  },
    items: {
    height: 'variable',                 
    visible: {
        min: 1,
        max: 1
  }
  }

  });
 });
</script>

jsfiddle中的工作代码如下所示。

JSFIDDLE

注意：出于某种原因，我只需要 1 类 carmod17，而不需要添加像 carmod18、carmod19 等这样的类。 非常感谢您的帮助。

谢谢。

Answer 1

试试这个，希望对你有帮助..:)

小提琴链接https://jsfiddle.net/dozm474r/1/

$('.carmod17').each(function(i) {

  var newClass = 'newClass' + i;
  var newNext = 'nextNew' + i;
  var newPrev = 'prevNew' + i;
  var newPage = 'paginationNew' + i;


  $(this).addClass(newClass)
    .parent().find('.next17')
    .addClass(newNext);

  $(this).parent().find('.prev17')
    .addClass(newPrev);

  $(this).parent().parent().find('.paginationbrand')
    .addClass(newPage);

  $('.' + newClass).carouFredSel({
    responsive: true,
    pagination: '.' + newPage,
    prev: '.' + newPrev,
    next: '.' + newNext,
    auto: true,
    scroll: {
      duration: 1500,
      pauseOnHover: true
    },
    items: {
      height: 'variable',
      visible: {
        min: 1,
        max: 1
      }
    }

  });
});

.module17 {
  position: relative;
}
#module17-wrapper {
  float: left;
  position: relative;
  width: 100%;
}
.list_carousel3 .prev17,
.list_carousel3 .next17 {
  text-indent: -999px;
  display: block;
  overflow: hidden;
  width: 35px;
  height: 40px;
  position: absolute;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  opacity: 0;
}
#module17-wrapper:hover .prev17,
#module17-wrapper:hover .next17 {
  opacity: 1;
}
.list_carousel3 .prev17 {
  right: 10px;
  bottom: 80px;
  background-image: url(http://www.clinique-veterinaire-du-corum.com/images/arrow-prev.png);
  background-repeat: no-repeat;
  background-color: #ff0;
  background-position: center center;
}
.list_carousel3 .prev17:hover {
  background-color: #ccc;
}
.list_carousel3 .next17 {
  right: 10px;
  bottom: 120px;
  background-image: url(http://www.clinique-veterinaire-du-corum.com/images/arrow-next.png);
  background-repeat: no-repeat;
  background-color: #fff;
  background-position: center center;
}
.list_carousel3 .next17:hover {
  background-color: #ccc;
}
.paginationbrand {
  position: absolute;
  bottom: 7px;
  width: 100%;
  z-index: 1;
}
.paginationbrand {
  text-align: center;
}
.paginationbrand a {
  background-color: rgba(0, 0, 0, 0.5);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 5px 5px 0 0;
  display: inline-block;
}
.paginationbrand a.selected {
  background-position: -25px -300px;
  cursor: default;
  background-color: #C44E00;
}
.darkarea .paginationbrand a {
  border: 1px solid#fff;
}
.darkarea .paginationbrand a.selected {
  border: 1px solid#fff;
  background-color: #fff;
}
.paginationbrand a span {
  display: none;
}
.wrapper-module17 {
  float: left;
  margin: 0;
  position: relative;
}
.module17-thumbnail {
  float: left;
  width: 100%;
  position: relative;
}
p {
  float: left;
  width: 100%;
  margin: 20px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.1.0/jquery.carouFredSel.packed.js"></script>


<h1>SLIDER NUMBER 1</h1>
<div class="module17">
  <div class="list_carousel3 responsive">
    <div class="paginationbrand"></div>
    <div id="module17-wrapper">
      <div class="carmod17 slider">
        <div class="wrapper-module17">
          <div class="module17-thumbnail">
            <img src="http://www.catholicworldreport.com/Content/Site140/Blog/3992michaelange_00000003427.jpg" alt="">
          </div>
        </div>

        <div class="wrapper-module17">
          <div class="module17-thumbnail">
            <img src="https://www.childrenandnature.org/wp-content/uploads/2015/01/childrenglobe2.jpg" alt="">
          </div>
        </div>

        <div class="wrapper-module17">
          <div class="module17-thumbnail">
            <img src="https://zwonderland.files.wordpress.com/2013/10/milan-kundera.jpg" alt="">
          </div>
        </div>


      </div>
      <a class="prev17" href="#"></a>
      <a class="next17" href="#"></a>
    </div>
  </div>
</div>

<p>
</p>
<h1>SLIDER NUMBER 2</h1>
<div class="module17">
  <div class="list_carousel3 responsive">
    <div class="paginationbrand"></div>
    <div id="module17-wrapper">
      <div class="carmod17 slider">
        <div class="wrapper-module17">
          <div class="module17-thumbnail">
            <img src="http://www.catholicworldreport.com/Content/Site140/Blog/3992michaelange_00000003427.jpg" alt="">
          </div>
        </div>

        <div class="wrapper-module17">
          <div class="module17-thumbnail">
            <img src="https://www.childrenandnature.org/wp-content/uploads/2015/01/childrenglobe2.jpg" alt="">
          </div>
        </div>

        <div class="wrapper-module17">
          <div class="module17-thumbnail">
            <img src="https://zwonderland.files.wordpress.com/2013/10/milan-kundera.jpg" alt="">
          </div>
        </div>


      </div>
      <a class="prev17" href="#"></a>
      <a class="next17" href="#"></a>
    </div>
  </div>
</div>

note: i would recommend avoid using same id's for multiple items

Answer 2

你使用相同的类，给它们不同的类名并相应地改变css和HTML

$('.carmod17').each(function(){
    $(this).carouFredSel({  
                    responsive: true,
                    pagination  : ".paginationbrand",                   
                    prev: '.prev17',
                    next: '.next17',
                    auto: true,
                    scroll: {
                    duration: 1500,
                    pauseOnHover: true  
                        },
                    items: {
                    height: 'variable',                 
                    visible: {
                        min: 1,
                        max: 1
                        }
                    }

    });
});

$('.carmod18').each(function(){
    $(this).carouFredSel({  
                    responsive: true,
                    pagination  : ".paginationbrand",                   
                    prev: '.prev18',
                    next: '.next18',
                    auto: true,
                    scroll: {
                    duration: 1500,
                    pauseOnHover: true  
                        },
                    items: {
                    height: 'variable',                 
                    visible: {
                        min: 1,
                        max: 1
                        }
                    }

    });
});

http://jsfiddle.net/pxM45/380/