我們可以在單個頁面中兩次使用相同的jquery插件嗎？

我一直在試圖添加滑塊模型到網頁，我想添加滑塊在兩個不同的div ..我試着重命名的元素和類名..bt它不wrk ...有沒有解決方案呢？ ??是否有可能在同一頁中使用兩次jquery插件？我們可以在單個頁面中兩次使用相同的jquery插件嗎？

我嘗試添加的插件代碼

 

     var currentPosition1 = 0; 
        var slideWidth1 = 900; 
        var slides1 = $('.slider1'); 
        var numberOfSlides1 = slides1.length; 

        // Remove scrollbar in JS 
        $('#slidesContainer1').css('overflow', 'hidden'); 

        // Wrap all .slides with #slideInner div 
        slides1 
        .wrapAll('') 
        // Float left to display horizontally, readjust .slides width 
        .css({ 
         'float' : 'left', 
         'width' : slideWidth1 
        }); 

        // Set #slideInner width equal to total width of all slides 
        $('#slideInner1').css('width', slideWidth1 * numberOfSlides1); 

        // Insert controls in the DOM 
        $('#slideshow1') 
        .prepend('Clicking moves left') 
        .append('Clicking moves right'); 

        // Hide left arrow control on first load 
        manageControls1(currentPosition1); 

        // Create event listeners for .controls clicks 
        $('.control') 
        .bind('click', function(){ 
        // Determine new position 
        currentPosition1 = ($(this).attr('id')=='rightControl1') ? currentPosition1+1 : currentPosition1-1; 

        // Hide/show controls 
        manageControls1(currentPosition1); 
        // Move slideInner using margin-left 
        $('#slideInner1').animate({ 
         'marginLeft' : slideWidth1*(-currentPosition1) 
        }); 
        }); 

        // manageControls: Hides and Shows controls depending on currentPosition 
        function manageControls1(position1){ 
        // Hide left arrow if position is first slider2 
        if(position1==0){ $('#leftControl1').hide() } else{ $('#leftControl1').show() } 
        // Hide right arrow if position is last slider2 
        if(position1==numberOfSlides1-1){ $('#rightControl1').hide() } else{ $('#rightControl1').show() } 
        }

到DIV Panel1的

<div class="panel1"> 
    <div id="slideshow1"> 
     <div id="slidesContainer1"> 




      <div class="slider1"> 
       <table style="margin-bottom:50px;"><tbody id="facetPrsnRslt"></tbody></table> 
      </div> 
      <div class="slider1"> 
       <p>This is the END my Friend...</p> 
      </div> 
     </div> 
    </div> 


</div>

，還有另外一個DIV面板2，我想添加同樣的滑塊插件中面板2，BT沒有運氣...

來源

2012-04-02 Sam

你嘗試過什麼？什麼不行？爲什麼你認爲它不起作用（錯誤，例外）？ – xyz 2012-04-02 11:25:28

我想添加滑塊功能......所以滑塊在第一個div wrks完美，bt滑塊不會wrk在第二個div ..它不提供任何錯誤信息.. – Sam 2012-04-02 11:28:22

一點點的代碼可能會幫助很多。 – xyz 2012-04-02 11:29:47

所以你有一套代碼，做你想做的事情，但想在多個元素中使用它？你有什麼只是簡單的「用戶腳本」 - 一組代碼，你可以做你想做的事情......就這樣，魔法就完成了。如果你想讓它可重複使用和可擴展性，嘗試建立一個真正插件的東西，可以這樣做：如果你想深入到插件開發的細節

$('set_of_elements').myOwnPlugin({option:'foo'});

，看看到this article這也解釋了它徹底（並且最初可能令人困惑）。他們在掌握基礎知識之後，可能需要獲取用於構建插件代碼結構的「模板」。有我親自使用的2個樣板，this one和this one。前者使用jQuery文章中的修改版本，另一種使用OOP方法。

來源

2012-04-02 11:59:52 Joseph

這取決於插件，我們不能說所有的插件都可以在一個html文件中使用兩次。但是這個特定的插件似乎工作。我不知道你是改變類或ID，我看到該插件的源代碼，它需要的類放一些CSS，但容器的id是你必須使用初始化幻燈片什麼

<div id="showcase1" class="showcase"> 
<!-- contents needed for the showcase --> 
</div> 
<div id="showcase2" class="showcase"> 
<!-- contents needed for the showcase --> 
</div>

在JavaScript

$(document).ready(function() { 
    $("#showcase1").awShowcase({ /* config of this showcase */ }); 
    $("#showcase2").awShowcase({ /* config of this showcase */ }); 
})

這裏是的jsfiddle http://jsfiddle.net/6qkjbqdh/

一個例子，我注意到，該插件使用的是舊版本的jQuery（1.5.2），請記住，也許，你的版本包括在你的項目中可能會更近一些帽子可能會導致問題。

問候

來源

2015-10-10 15:37:25 cnexans

我們可以在單個頁面中兩次使用相同的jquery插件嗎？

回答

相關問題