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

Question

我正在尝试滚动显示每个使用按钮（下一个和上一个）的<ul>元素。<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>我怎样才能在每个之间切换<ul>？

标签： javascriptjqueryhtml-lists

Answer 1

1. 你应该使用prev而不是previous
2. 你应该在做任何事情之前检查你是否有下一个/上一个元素：

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