Question

我有以下HTML代码：

<div id="work-field">
  <div class="inline">Field inline1</div>
  <div class="inline">Field inline2</div>
  <div class="inline">Field inline3</div>
  <div class="inline">Field inline4</div>
  <div class="inline">Field inline5</div>
  <div class="inline">...</div>
</div>

<div id="work-area">
  <div class="inline">Area inline 1</div>
  <div class="inline">Area inline 2</div>
  <div class="inline">Area inline 3</div>
  <div class="inline">Area inline 4</div>
  <div class="inline">Area inline 5</div>
  <div class="inline">...</div>
</div>

并使用此javascript代码：

$('#work-area, #work-field').addClass('js-inline');
var nextbutton = '<a href="#" class="next">Next</a>';
$(nextbutton).insertAfter('.js-inline > div.inline:last-child');
$('.js-inline').each(function() {
    var $this = $(this);
    $(this).children('.inline:not(:first-child)').css('display', 'none');
});

$('.next').each(function() {
    var $this = $(this);
    $(this).click(function(e) {
        var $this = $(this);
        e.preventDefault();
        $(this).parent().find('.inline:visible').next().show();
    })
});

以上JS代码将：

将“.js-inline”类添加到2个父元素（工作区，工作区）。
在每个“.js-inline”div中的最后一个“.inline”后面添加“下一步”按钮。
隐藏每个“.inline”元素，但每个div中的第一个元素除外。
单击“下一步”链接时显示当前.js内联父级中下一个（隐藏）.inline的函数。

现在的问题是，当显示最后一个.inline元素时，我希望“下一步”按钮消失，我尝试了这段代码，但它没有用。

if ( $('.js-inline').find('.inner:visible').next().next().length == 0 ) {
   $('.next').hide();
}

在此行之后插入了以上行：

$(this).parent().find('.inline:visible').next().show();

我的问题：提供工作所需功能所需的IF语句是什么？它应该在哪里？

Answer 1

您可以使用is(':visible')检查元素是否可见

$('#work-area, #work-field').addClass('js-inline');
var nextbutton = '<a href="#" class="next">Next</a>';
$(nextbutton).insertAfter('.js-inline > div.inline:last-child');
$('.js-inline').each(function() {
  var $this = $(this);
  $(this).children('.inline:not(:first-child)').css('display', 'none');
});

$('.next').click(function(e) {
  var $this = $(this);
  e.preventDefault();
  $this.parent().find('.inline:visible').last().next().show();
  $this.toggle(!$this.parent().find('.inline').last().is(':visible'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="work-field">
  <div class="inline">Field inline1</div>
  <div class="inline">Field inline2</div>
  <div class="inline">Field inline3</div>
  <div class="inline">Field inline4</div>
  <div class="inline">Field inline5</div>
  <div class="inline">...</div>
</div>

<div id="work-area">
  <div class="inline">Area inline 1</div>
  <div class="inline">Area inline 2</div>
  <div class="inline">Area inline 3</div>
  <div class="inline">Area inline 4</div>
  <div class="inline">Area inline 5</div>
  <div class="inline">...</div>
</div>

当父级的最后一个子元素可见时隐藏按钮

1 个答案: