Question

我需要开发一个向导，所以我每次都将“row”类显示为向导页面之一。在这里，我想确定哪个是当前可见的div，如果可见，我可以隐藏所有其他div并显示第二个div等等。

我想得到当前可见的div索引。

我有一些像这样的代码：

(each time when next button or prev btn is pressed)
var divs = $('.wiz>div');
divs.hide().first().show(); //initial page
//get current index if one the go to next

//index = ??

divs.hide();
divs.eq(index++).show();

<div class="wiz">
    <div class="row">
        <div class="col s6">

        </div>
        <div class="col s6">

        </div>
    </div>
    <div class="row">
        <div class="col s12">

        </div>
    </div>
    <div class="row">
        <div class="col s6">

        </div>
        <div class="col s6">

        </div>
    </div>
    <div class="row">
        <div class="col s12">

        </div>
    </div>
</div>

Answer 1

这是我的HTML文件

    <div class="wiz">
    <div class="row">
        <div class="col s6">
            block 1
        </div>
        <div class="col s6">
            block 2
        </div>
    </div>
    <div class="row">
        <div class="col s12">
            block 3
        </div>
    </div>
    <div class="row">
        <div class="col s6">
            block 4
        </div>
        <div class="col s6">
            block 5
        </div>
    </div>
    <div class="row">
        <div class="col s12">
          block 6
        </div>
    </div>
</div>

<button id="btn_prev">Prev</button>
<button id="btn_next">Next</button>

这是我的javascript代码

    $(function() {
  //console.log("I'm ready!")
  var divs = $('.wiz>div');
  var index = 0;
  var length = divs.length;

  // initialize
  showHideBlock(divs, index);

  $('#btn_prev').click(function() {
    index = performClick(index, false, length);
    showHideBlock(divs, index);
  });

  $('#btn_next').click(function() {
    index = performClick(index, true, length)
    showHideBlock(divs, index);
  });

});

performClick = function(index, next, length) {
  if (next && index < (length - 1)) return index + 1;

  if (!next && index > 0) return index - 1;

  return index;
}

showHideBlock = function(elt, index) {
  elt.hide();
  elt.eq(index).show();
}

Answer 2

你为什么不试试

$(element).is(":visible");

并将其放入if声明中？你可以这样做来测试一个元素是否可见，并且因为你想隐藏其他div，你可以这样做

$(element).css({display: 'none'});

我相信你已经知道该怎么做了。

查看此.is() jQuery API了解详情。

jQuery来检查哪个div是可见的

2 个答案: