如何在ul中的列表项之间切换

时间：2018-11-18 13:47:33

标签： javascript jquery html-lists

我试图使用按钮（下一个和上一个）滚动显示每个<ul>的{​​{1}}元素。除非到达末尾，否则下一个按钮将按预期工作。上一个按钮似乎根本不起作用。

这是我的尝试的实时预览：

<li>
$(document).ready(function() {
  $('#next-task').click(function() {
    var cur = $('#tasks li:visible');
    cur.hide();
    cur.next().slideToggle('slow');
  });
  $('#previous-task').click(function() {
    var cur = $('#tasks li:visible');
    cur.hide();
    cur.previous().slideToggle('slow');
  });
});
.task-details p {
  margin-bottom: 0px;
}

.task-details {
  margin-bottom: 5%;
}

.task-info {
  margin-bottom: 5%;
}

#tasks {
  list-style: none;
  display: block;
}

#tasks li {
  display: none;
  list-style: none;
}

#tasks li:first-child {
  display: block;
}

如何在<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <div class="modal fade" id="overviewModal" tabindex="-1" role="dialog" aria-labelledby="overviewModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="overviewModalLabel">Solution Overview</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <ul id='tasks'> <li> <div class='task-info'> <textarea style='min-height: 150px; width: 100%;'>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</textarea> </div> <div class='task-details'> <p>Assigned To Kyle</p> <p>Live View: <input type='text' value='localhost/foo' /></p> </div> <div id='task-progress' class="progress progress-mini"> <div style="width: 70%;" class="progress-bar progress-bar-info">70%</div> </div> </li> <li> <div class='task-info'> <textarea style='min-height: 150px; width: 100%;'>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</textarea> </div> <div class='task-details'> <p>Assigned To Daniel</p> <p>Live View: <input type='text' value='localhost/bar' /></p> </div> <div id='task-progress' class="progress progress-mini"> <div style="width: 70%;" class="progress-bar progress-bar-info">70%</div> </div> </li> </ul> </div> <div class="modal-footer" style='display: block;'> <button style='float: left;' class="btn btn-secondary" type='button' id='previous-task'>Previous</button> <button style='float: left;' class="btn btn-secondary" type='button' id='next-task'>Next</button> <button style='float: right;' type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button style='float: right;' onclick="" type="button" id='save-btn' class="btn btn-primary">Save</button> </div> </div> </div> </div> <button sid='0' onclick="jQuery('save-btn').attr('sid', jQuery(this).attr('sid'));" type="button" class="btn btn-primary" data-toggle="modal" data-target="#overviewModal">Access</button>中的每个<li>之间切换？

1 个答案:

答案 0 :(得分：1)

  1. 您应该使用prev而不是previous
  2. 在执行任何操作之前，应检查是否具有next / prev元素：

$(document).ready(function() {
  $('#next-task').click(function() {
    var cur = $('#tasks li:visible');
    if (cur.next().length) {
      cur.hide();
      cur.next().slideToggle('slow');
    }
  });
  $('#previous-task').click(function() {
    var cur = $('#tasks li:visible');
    if (cur.prev().length) {
      cur.hide();
      cur.prev().slideToggle('slow');
    }
  });
});
.task-details p {
  margin-bottom: 0px;
}

.task-details {
  margin-bottom: 5%;
}

.task-info {
  margin-bottom: 5%;
}

#tasks {
  list-style: none;
  display: block;
}

#tasks li {
  display: none;
  list-style: none;
}

#tasks li:first-child {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="modal fade" id="overviewModal" tabindex="-1" role="dialog" aria-labelledby="overviewModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="overviewModalLabel">Solution Overview</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
      </div>
      <div class="modal-body">
        <ul id='tasks'>
          <li>
            <div class='task-info'>
              <textarea style='min-height: 150px; width: 100%;'>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</textarea>
            </div>
            <div class='task-details'>
              <p>Assigned To Kyle</p>
              <p>Live View: <input type='text' value='localhost/foo' /></p>
            </div>
            <div id='task-progress' class="progress progress-mini">
              <div style="width: 70%;" class="progress-bar progress-bar-info">70%</div>
            </div>
          </li>
          <li>
            <div class='task-info'>
              <textarea style='min-height: 150px; width: 100%;'>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</textarea>
            </div>
            <div class='task-details'>
              <p>Assigned To Daniel</p>
              <p>Live View: <input type='text' value='localhost/bar' /></p>
            </div>
            <div id='task-progress' class="progress progress-mini">
              <div style="width: 70%;" class="progress-bar progress-bar-info">70%</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="modal-footer" style='display: block;'>
        <button style='float: left;' class="btn btn-secondary" type='button' id='previous-task'>Previous</button>
        <button style='float: left;' class="btn btn-secondary" type='button' id='next-task'>Next</button>
        <button style='float: right;' type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button style='float: right;' onclick="" type="button" id='save-btn' class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>
<button sid='0' onclick="jQuery('save-btn').attr('sid', jQuery(this).attr('sid'));" type="button" class="btn btn-primary" data-toggle="modal" data-target="#overviewModal">Access</button>

相关问题
最新问题