jQuery簡單分頁

我有幾個ul，我只想每次只顯示1個上一個和下一個按鈕來遍歷它們。jQuery簡單分頁

我正在使用PHP的foreach生成每個ul最多6個li。以及爲每個（itemX）獲取唯一的ID。

<ul class="itemWrap" id="itemX"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    // ETC 
</ul>

我想使用jQuery來設置所有「itemWrap」顯示無，然後設置ID「項目1」，以顯示在頁面加載塊。

然後，當點擊next/prev按鈕時，將當前ul設置爲顯示none，並將下一個/ prev ul設置爲顯示塊。

jQuery(document).ready(function(){ 
jQuery(".itemWrap").css("display", "none"); 
jQuery("#item1").css("display", "block"); 

var count = 1; 
var item = jQuery("#item" + count); 

jQuery(".prev").click(function(){ 
    // do previous tab 

    jQuery.each(item, function() { 
     item.css("display", "none"); 
    }); 

    count--; 

    jQuery.each(item, function() { 
     item.css("display", "block"); 
    }); 
}); 

jQuery(".next").click(function(){ 
    // do next tab 

    jQuery.each(item, function() { 
     item.css("display", "none"); 
    }); 

    count++; 

    jQuery.each(item, function() { 
     item.css("display", "block"); 
    }); 
});});

這是我有什麼，它的工作原理，設置當前上行顯示無，但前提是什麼，告訴它來設置一個/上一個UL顯示塊。

來源

2015-04-06 Edward144

改變'count'不會改變'item'是什麼。每次更改'count'時使用新的選擇器 – charlietfl

請看看它是否對你有幫助。這裏是你的JavaScript

$(document).ready(function(){ 

$("#item1").addClass("active"); 

$(".prev").click(function(){ 
    // do previous tab 
    var $el = $(".active").prev(".itemWrap"); 
    if($el.length){ 
     $(".itemWrap").each(function() { 
      $(this).removeClass("active"); 
     }); 
     $el.addClass("active"); 
    } 

}); 

$(".next").click(function(){ 
    // do next tab 
    var $el = $(".active").next(".itemWrap"); 
    if($el.length){ 
    $(".itemWrap").each(function() { 
     $(this).removeClass("active"); 
    }); 
    $el.addClass("active"); 
    } 
}); 

});

，這裏是你的CSS

.itemWrap 
{ 
display:none; 
} 
.itemWrap.active 
{ 
display:block; 
}

這裏是fiddle

來源

2015-04-06 15:56:06 Ashokbharathi

這很好，謝謝。 – Edward144

我認爲你應該使用DOM的狀態，而不是JS變量來確定要隱藏或顯示下一個。這樣你就可以避免全局變量，並使用DOM的狀態來確定行爲。下面是一些簡單的代碼（它需要的邊界檢查和一些改進，但它應該讓你開始）：

$(document).ready(function(){ 
    $(".itemWrap").hide(); 
    $("#item1").show(); 
    $("#prev").click(function(){ 
     var currentVisible = $(".itemWrap:visible"); 
     currentVisible.hide(); 
     currentVisible.prev(".itemWrap").show(); 
    }); 

    $("#next").click(function(){ 
     var currentVisible = $(".itemWrap:visible"); 
     currentVisible.hide(); 
     currentVisible.next(".itemWrap").show(); 
    }); 
});

這裏的工作小提琴，如果你想嘗試一下：http://jsfiddle.net/jj5q441o/4/

來源

2015-04-06 15:58:27 wholevinski

或者你可以使用我的jQuery插件。

$(document).ready(function{ 
function loadPaging_content(offset_data){ 
    var offset;//default value page button 
    if(offset_data){ 
     offset = offset_data; 
    }else{ 
     offset = 0; 
    } 
    var items = 10;//example 
    $('your LoadPage selector(In this div load Page)').xhrPagination({ 
     sel: 'selector',//In this div created paging Links 
     totalCount: 'selector OR Number', 
     items: items 
     }, 
     { 
      url:'//your URL', 
      dataLP:{offset: offset, items:items} 
     } 
    ); 
} 
});

這裏是鏈接：https://github.com/WadimMakarenko/jquery-simple_ajax

來源

2016-12-24 23:41:49

jQuery簡單分頁

回答

相關問題