Как переключаться между элементами списка в пределах ul - PullRequest
Новая
       11

Как переключаться между элементами списка в пределах ul

0 голосов
/ 18 ноября 2018

Я пытаюсь прокрутить элемент <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>?

1 Ответ

0 голосов
/ 18 ноября 2018
  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>
...