隱藏一定的範兒jQuery的

我建立了一堆的頁面的常見標題和傳遞變量設置標題文本，等我有面包屑菜單，我想只顯示的步驟適當數量爲頁面。因此，這裏是我的菜單HTML：隱藏一定的範兒jQuery的

<ol id="meter" class=""> 
<li>Page 1</li> 
<li>Page 2</li> 
<li>Page 3</li> 
<li>Page 4</li> 
</ol>

然後，我有一個功能，看起來像這樣：

function levels() { 
$("#meter").addClass(stepNumber); 
}

在第一頁，我設置了類「一」，第二頁上的「兩個「等。

如果班級是」一「，我只想顯示第一項。如果是「兩節」，我只想顯示第一和第二等

我知道我可以做的CSS，我寫的每一類風格的東西，但似乎有點傻。我如何用jQuery來做這件事？

來源

2015-04-26 DeanH

我會得到的，而不是與菜單的類裝模作樣從路由麪包屑信息。你的平臺是什麼？服務器端使用哪種語言？ – ilter

嘗試設置className到1，2 - >100，以及利用:gt() Selector選擇

function levels(stepNumber) { 
 
    $("#meter").addClass(stepNumber) 
 
    .find("li:gt(" + (stepNumber - 1) + ")") 
 
    .hide(); 
 
} 
 

 
levels(2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<ol id="meter" class=""> 
 
    <li>Page 1</li> 
 
    <li>Page 2</li> 
 
    <li>Page 3</li> 
 
    <li>Page 4</li> 
 
</ol>

備選地，爲了保持加入className爲one，two - >onehundred，可以創建一個對象表示每個項目的數量class

var keys = { 
 
    1: "one", 
 
    2: "two", 
 
    3: "three", 
 
    4: "four" 
 
}; 
 

 
function levels(stepNumber) { 
 
    $("#meter").addClass(keys[stepNumber]) 
 
    .find("li:gt(" + (stepNumber - 1) + ")") 
 
    .hide(); 
 
} 
 

 
levels(2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<ol id="meter" class=""> 
 
    <li>Page 1</li> 
 
    <li>Page 2</li> 
 
    <li>Page 3</li> 
 
    <li>Page 4</li> 
 
</ol>

來源

2015-04-26 20:03:16 guest271314

第一個正是我所需要的。謝謝！ – DeanH

@DeanH歡迎您:) – guest271314

爲什麼不使用for循環加上一些jQuery來將相關元素數設置爲顯示狀態？例如：

var count = // number from class 
var listElements = $('#meter').children() 
for (i = 0; i < count; i++) { 
    $(listElements[i]).addClass('active'); 
}

在這裏，'active'類會附加一個顯示屬性。你能理解這個嗎？

請注意，您將需要修改子類的名字，使他們能夠在作爲指數環。

來源

2015-04-26 19:54:28 grill

您可以爲每一頁添加相關課程。例如：「PAGE_1」，「page_2」 ......

<ol id="meter" class=""> 
<li class="page_1">Page 1</li> 
<li class="page_2">Page 2</li> 
<li class="page_3">Page 3</li> 
<li class="page_4">Page 4</li> 
</ol>

添加此CSS：

#meter li{display:none;}

而且腳本將是：

function currentPage(pageNum){ 
     $("#meter li").each(function(){ 
      if(parseInt($(this).attr("class").split("_")[1]) <= pageNum){ 
       $(this).show(); 
      }else{ 
       $(this).hide(); 
      } 
     }) 
    }

您將通過靶向像這樣：

currentPage(3);

這裏是jsfiddle的例子：https://jsfiddle.net/216tw9u7/

來源

2015-04-26 20:17:09

隱藏一定的範兒jQuery的

回答

相關問題