如何在同一頁面的函數內重用jQuery腳本

我做了一個滑塊，如果我使用1個滑塊，一切正常。使用2滑塊時出現問題。分頁和上一個/下一個箭頭不能按原樣工作。他們指着第二個滑塊。如何在同一頁面的函數內重用jQuery腳本

這裏我的腳本：

<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等會很感激你的幫助。

謝謝。

來源

2016-04-03 Mailmulah

試試這個，希望這有助於.. :)

撥弄鏈接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

來源

2016-04-03 10:27:29

它仍然是一個新類，連接我 – Mihai

是的，但工作正確.. :) –

你救了我的一天，@mike跟蹤。這對我所需要的是完美的。謝謝！ – Mailmulah

您正在使用相同的類兩種，給他們不同的類別名稱並更改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/

來源

2016-04-03 09:15:05 Mihai

感謝@Mihai，但我需要使用1類（carmod17）的WordPress插件來實現。 – Mailmulah

@Mailmulah這是不可能的，因爲一個控件只能映射到一個滑塊。 – Mihai

@Mhaihai，不難做到，請檢查mt代碼 –

如何在同一頁面的函數內重用jQuery腳本

回答

相關問題