使用兩個ID爲一個單一的JQuery插件

Question

我想使用一個jQuery插件，我想將相同的功能應用於兩個不同的ID。

我怎樣才能做到這一點，這是一個類型的下一個和以前的功能，其中，如果我們點擊下一步，然後雙方的div應自動滾動..

如果你看到HTML也有同樣的拖車的div我不應該使用的id，因爲如果我正在更改id，那麼id應該是唯一的，並且如何爲同一個插件調用該id。

尋求幫助

這裏是我試過的。

stepcarousel.setup({ 
    galleryid: 'gallerya', //id of carousel DIV 
    beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs 
    panelclass: 'panel', //class of panel DIVs each holding content 
    autostep: {enable:true, moveby:1, pause:3000}, 
    panelbehavior: {speed:300, wraparound:false, persist:false}, 
    defaultbuttons: {enable: true, moveby: 1, leftnav: ['images/left-arrow.png', 200, -30], rightnav: ['images/right-arrow.png', 10, -30]}, 
    contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file'] 
}) 

div id="gallerya" class="stepcarousel" style="height:731px;"> 
        <div class="belt"> 
         <div class="panel" style="width:252px;"> 
         <ul> 
         <li class="first leaf"><a href="http://www.jobzing.com/preparation-for-an-interview/financial-analyst-interview-preparation.html" title=""> How to prepare for financial analyst interview?</a></li> 
<li class="leaf"><a href="http://www.jobzing.com/preparation-for-an-interview/external-training-programs-and-salary.html" title="">Are external training programs offered by company part of salary package?</a></li> 
<li class="leaf"><a href="/preparation-for-an-interview/bank.html" title="">Bank Interview Preparation</a></li> 
<li class="leaf"><a href="http://www.jobzing.com/preparation-for-an-interview/prepare-for-campus-interview.html" title="">Best ways to Prepare for Campus Interview</a></li> 
<li class="leaf"><a href="/preparation-for-an-interview/cognitive-abilities-tests" title="">Cognitive Abilities Test</a></li> 
<li class="leaf"><a href="/preparation-for-an-interview/college.html" title="">College Interview Preparation</a></li> 
<li class="leaf"><a href="http://www.jobzing.com/preparation-for-an-interview/career-goals-in-job-interview.html" title="">Discussing career goals in a job interview</a></li> 
<li class="leaf"><a href="/tools/dressing-tips" title="">Dressing up for Interview</a></li> 
<li class="leaf"><a href="/top-100-questions/engg" title="">Engineering Interview Questions</a></li> 
<li class="leaf"><a href="http://www.jobzing.com/preparation-for-an-interview/favorite-job-destinations-in-india.html" title="">Favorite job destinations in India</a></li> 
<li class="leaf"><a href="/top-100-questions/finance" title="">Finance Interview Questions</a></li> 
<li class="leaf"><a href="http://www.jobzing.com/preparation-for-an-interview/group-discussion-rules-for-interview.html" title="">Group Discussion Rules for Interview updated</a></li> 
<li class="leaf"><a href="http://www.jobzing.com/preparation-for-an-interview/dietician-interview-preparation.html" title="">How to Prepare for Dietician Job Interview</a></li> 
<li class="leaf"><a href="http://www.jobzing.com/preparation-for-an-interview/lab-technician.html" title="">How to Prepare for Lab Technician Interview?</a></li> 
<li class="leaf"><a href="http://www.jobzing.com/preparation-for-an-interview/pilot-interview-preparation.html" title="">How to Prepare for Pilot Interview</a></li> 
<li class="leaf"><a href="http://www.jobzing.com/preparation-for-an-interview/accounting.html" title="">How to Prepare for an Accounting Interview</a></li> 
<li class="leaf"><a href="http://www.jobzing.com/preparation-for-an-interview/insurance-agent-interview-preparation.html" title="">How to Prepare for an Insurance Agent Interview?</a></li> 
<li class="leaf"><a href="http://www.jobzing.com/preparation-for-an-interview/how-to-answer-basic-interview-questions.html" title="">How to answer basic interview questions?</a></li> 
        </ul> 
         </div> 

<div id="gallerya" class="stepcarousel" style="height:160px;"> 
        <div class="belt"> 
         <div class="panel"> 
         <ul> 
         <li> 
          <span><a href="http://www.jobzing.com/9779-project-manager.html"><b>Project Manager</u></b></a></span></span> <br /> 
          <span>A&amp;E Consulting</span><br /> 
          <span>Philippines </span> 
        </li> 
        <li> 
          <span><a href="http://www.jobzing.com/9779-project-manager.html"><b>Project Manager</u></b></a></span></span> <br /> 
          <span>A&amp;E Consulting</span><br /> 
          <span>Philippines </span> 
        </li> 
        </ul> 
         </div> 

Page that I am creating

Answer 1

你有沒有嘗試過這樣的事情：

呼叫.setup一旦與galleryid: 'galleryA'，beltclass: 'beltA'和panelclass: 'panelA'。然後再與galleryid: 'galleryB',beltclass: 'beltB'和panelclass: 'panelB'。

stepcarousel.setup({ 
    galleryid: 'galleryA', //id of carousel DIV 
    beltclass: 'beltA', //class of inner "belt" DIV containing all the panel DIVs 
    panelclass: 'panelA', //class of panel DIVs each holding content 
    autostep: {enable:true, moveby:1, pause:3000}, 
    panelbehavior: {speed:300, wraparound:false, persist:false}, 
    defaultbuttons: {enable: true, moveby: 1, leftnav: ['images/left-arrow.png', 200, -30], rightnav: ['images/right-arrow.png', 10, -30]}, 
    contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file'] 
}) 

stepcarousel.setup({ 
    galleryid: 'galleryB', //id of carousel DIV 
    beltclass: 'beltB', //class of inner "belt" DIV containing all the panel DIVs 
    panelclass: 'panelB', //class of panel DIVs each holding content 
    autostep: {enable:true, moveby:1, pause:3000}, 
    panelbehavior: {speed:300, wraparound:false, persist:false}, 
    defaultbuttons: {enable: true, moveby: 1, leftnav: ['images/left-arrow.png', 200, -30], rightnav: ['images/right-arrow.png', 10, -30]}, 
    contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file'] 
}) 

然後你的HTML這樣的：

<div id="galleryA" class="stepcarousel" style="height:731px;"> 
    <div class="beltA"> 
     <div class="panelA" style="width:252px;"> 
      <ul> 
       <li></li> 
       <li></li> 
      </ul> 
     </div> 
    </div> 
</div> 

<div id="galleryB" class="stepcarousel" style="height:160px;"> 
    <div class="beltB"> 
     <div class="panelB"> 
      <ul> 
       <li></li> 
       <li></li> 
      </ul> 
     </div> 
    </div> 
</div>