Question

更新

我试图在多个div中包含同一组按钮..似乎我只能在一个div上包含按钮。它只会立刻出现在一个位置。我希望按钮显示我设置的跨度的位置。救命！这是我的代码：

    (function($){

// Creating the jQuery plugin:
$.fn.sweetPages = function(opts){

    // If no options were passed, create an empty opts object
    if(!opts) opts = {};

    var resultsPerPage = opts.perPage || 3;

    // The plugin works best for unordered lists, althugh ols would do just as well:
    var ul = this;
    var li = ul.find('li');

    li.each(function(){
        // Calculating the height of each li element, and storing it with the data method:
        var el = $(this);
        el.data('height',el.outerHeight(true));
    });

    // Calculating the total number of pages:
    var pagesNumber = Math.ceil(li.length/resultsPerPage);

    // If the pages are less than two, do nothing:
    if(pagesNumber<2) return this;

    // Creating the controls div:
    var swControls = $('<div class="swControls">');

    for(var i=0;i<pagesNumber;i++)
    {
        // Slice a portion of the lis, and wrap it in a swPage div:
        li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('<div class="swPage" />');

        // Adding a link to the swControls div:
        swControls.append('<a href="" class="swShowPage">'+(i+1)+'</a>');
    }

    ul.append(swControls);

    var maxHeight = 0;
    var totalWidth = 0;

    var swPage = ul.find('.swPage');
    swPage.each(function(){

        // Looping through all the newly created pages:

        var elem = $(this);

        var tmpHeight = 0;
        elem.find('li').each(function(){tmpHeight+=$(this).data('height');});

        if(tmpHeight>maxHeight)
            maxHeight = tmpHeight;

        totalWidth+=elem.outerWidth();

        elem.css('float','left').width(ul.width());
    });

    swPage.wrapAll('<div class="swSlider" />');

    // Setting the height of the ul to the height of the tallest page:
    ul.height(maxHeight);

    var swSlider = ul.find('.swSlider');
    swSlider.append('<div class="clear" />').width(totalWidth);

    var hyperLinks = ul.find('a.swShowPage');

    hyperLinks.click(function(e){

        // If one of the control links is clicked, slide the swSlider div 
        // (which contains all the pages) and mark it as active:

        $(this).addClass('active').siblings().removeClass('active');

        swSlider.stop().animate({'margin-left':-(parseInt($(this).text())-1)*ul.width()},'slow');
        e.preventDefault();
    });

    // Mark the first link as active the first time this code runs:
    hyperLinks.eq(0).addClass('active');

    // Center the control div:
    swControls.css({
        'left':'50%',
        'margin-left':-swControls.width()/2
    });

    return this;

}})(jQuery);


$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

    // Calling the jQuery plugin and splitting the
    // #holder UL into pages of 3 LIs each:

    $('#holder').sweetPages({perPage:1});

    // The default behaviour of the plugin is to insert the 
    // page links in the ul, but we need them in the main container:

    var controls = $('.swControls').detach();
    controls.appendTo('#main');

    // Make Nav Buttons

    function swGotoPage(page){
    $('.swShowPage:contains("' + page + '")').click();
}

var baseFB = '<input type="button" class="swFB" />';
var offset = 'pgOffset';
var active = '.swShowPage.active';

var $pgBack = $(baseFB)
    .attr('id', 'button_back')
    .attr('value', "Back")
    .attr(offset, '-1');

var $pgForward = $(baseFB)
    .attr('id', 'button_forward')
    .attr('value', "Next")
    .attr(offset, '1');

$.each([$pgBack, $pgForward], function(i,$obj){
    $obj.click(function(){
        var nextPage =  parseInt($(active).text(), 10) + parseInt($(this).attr(offset), 10);
        swGotoPage(nextPage);
    });
});


$($pgForward).addClass("teach_create_backforward");
$($pgBack).addClass("teach_create_backforward");

$('.teach_create_pageheader_back').prepend($pgBack);
$('.teach_create_pageheader_forward').prepend($pgForward);


});

HTML：

<li>
    <div class="noselect" id="teach_create_pageheader">
        <span id="teach_create_pageheader_back"></span>
        Step 1
        <span id="teach_create_pageheader_forward"></span>
    </div>
</li>
<li>
    <div class="noselect" id="teach_create_pageheader">
        <span id="teach_create_pageheader_back"></span>
        Step 2
        <span id="teach_create_pageheader_forward"></span>
    </div>
<li>
    <div class="noselect" id="teach_create_pageheader">
        <span id="teach_create_pageheader_back"></span>
        Step 3
        <span id="teach_create_pageheader_forward"></span>
    </div>
<li>

Answer 1

元素ID在单个页面中应该是唯一的。

这是你想要的吗？ http://jsfiddle.net/haER9/2/

注册您的点击事件

$(".button_forward").click(function(){alert("forward");})
$(".button_back").click(function(){alert("back");})

Answer 2

每个jQuery API（参见http://api.jquery.com/id-selector/）...

每个id值只能使用一次在文件中。如果不止一个元素已被分配相同的ID，只使用该ID的查询选择第一个匹配的元素 DOM。

我会避免重复使用标识符，而是选择在类上。

例如（不确定这是否适合你 - 但你明白了）......

<li>
    <div class="noselect" id="teach_create_pageheader1">
        <span class="teach_create_pageheader_back"></span>
        Step 1
        <span class="teach_create_pageheader_forward"></span>
    </div>
</li>

$('.teach_create_pageheader_back').prepend($pgBack);
$('.teach_create_pageheader_forward').prepend($pgForward);

JQuery只允许使用此代码的一个按钮

2 个答案: