0

我正在尝试使用单个 jquery 插件，并且我想将相同的功能应用于两个不同的 id。

我怎样才能做到这一点，这是一种下一个和上一个功能，如果我们单击下一步，那么两个 div 都应该自动滚动..

如果您看到 html，则有两个相同 id 的 div 我不应该使用，因为如果我要更改 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>

我正在创建的页面

4

1 回答 1

0

你有没有尝试过这样的事情：

用,和调用.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>
于 2013-02-02T06:44:57.983 回答