Question

我正在为一堆页面构建一个公共标题并传入变量来设置标题文本等。我有一个breadcrumb菜单，我想只显示该页面的适当步骤数。所以这是我的菜单html：

<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来做呢？

Answer 1

尝试将className设为1，2 - ＆gt; 100，并使用:gt() Selector选择器

＆＃13;

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

＆＃13;

<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>

＆＃13;

或者，要继续将className添加为one，two - ＆gt; onehundred，可以创建一个对象来表示要为每个class

显示的项目数

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 2

为什么不使用for循环加上一些jQuery来将相关的元素数量设置为显示状态？例如：

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

这里，'active'类将附加一个显示属性。这对你有意义吗？

请注意，您需要编辑子类名称，以便它们可以在for循环中用作索引。

Answer 3

您可以为每个页面添加相关的课程。例如：“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/

隐藏一定范围的jQuery孩子

3 个答案: