Как сохранить числовое значение (или номер ссылки) с событием onClick? - PullRequest
Новая
       14

Как сохранить числовое значение (или номер ссылки) с событием onClick?

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

У меня много текстов, которые отображаются с использованием div и якорей. 

<div class="pageDisplayed" id="page1"><p>blah blah</p></div>
<div class="pageHidden" id="page2"><p>blah blah on a second page</p>/div>
<div class="pageHidden" id="page3"><p>blah blah on a third page</p></div>

Я использую приведенный ниже код для доступа к части текста, к страницам: 

 <h2>pages: 
   <a href="#" onclick="showPages('1')">1</a>
   <a href="#" onclick="showPages('2')">2</a>
   <a href="#" onclick="showPages('3')">3</a>
 </h2>

Теперь я хочу сделать 2 кнопки для переключения на следующую или предыдущую страницу, но проблема в том, что я не знаю, как сохранить значение текущей страницы, используя этот код.

Очевидно, onclick="showPages(id+1)" означает только "перейти на страницу 1" в этом коде.Как я могу изменить этот код, чтобы он мог сообщать браузеру, какую «страницу» я просматриваю, и увеличивать это значение, когда я нажимаю «следующий», и наоборот, когда я нажимаю «предыдущий»? 

function showPages(id = 1) {
  var totalNumberOfPages = 6;
  for (var i = 1; i <= totalNumberOfPages; i++) {
    if (document.getElementById('page' + i)) {
      document.getElementById('page' + i).style.display = 'none';
    }
  }
  if (document.getElementById('page' + id)) {
    document.getElementById('page' + id).style.display = 'block';
  }
};
showPages();
<div class="pageDisplayed" id="page1">
  <p>blah blah</p>
</div>
<div class="pageHidden" id="page2">
  <p>bloh blouh on a second page</p>
</div>
<div class="pageHidden" id="page3">
  <p>bleuh bleuh on a third page</p>
</div>

<h2>pages :
  <a href="#" onclick="showPages('1')">1</a>
  <a href="#" onclick="showPages('2')">2</a>
  <a href="#" onclick="showPages('3')">3</a>
</h2>

<h2>
  <span style="float: left;">
    <a href="#" onclick="showPages(id-1)">Previous</a>
  </span>

  <span style="float: right;">
    <a href="#" onclick="showPages(id+1)">Next</a>
  </span>
</h2><br><br>

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Как уже предлагали другие, вам нужна переменная для отслеживания текущей страницы.

Основываясь на вашем коде, я также внес другие изменения:

  • Используйте существующие классы CSS для изменения видимости, чтобы легче было изменять другие атрибуты и больше не нужночтобы инициализировать их с помощью JavaScript.
  • Проверьте наличие границ при нажатии Предыдущая / Следующая. 

var current = 1;
var totalPages = document.getElementById("pageContainer").childElementCount;

function showPages(id = 1) {
  if (id < 1 || id > totalPages) 
    return;
  curr_page = document.getElementById("page" + current);
  curr_page.classList.add("pageHidden");
  curr_page.classList.remove("pageDisplayed");

  target_page = document.getElementById("page" + id);
  target_page.classList.add("pageDisplayed");
  target_page.classList.remove("pageHidden");
  current = id;
}
.pageHidden {
  display: none;
}

.pageDisplayed {
  display: block;
}
<div id="pageContainer">
  <div class="pageDisplayed" id="page1">
    <p>blah blah</p>
  </div>
  <div class="pageHidden" id="page2">
    <p>blah blah on a second page</p>
  </div>
  <div class="pageHidden" id="page3">
    <p>blah blah on a third page</p>
  </div>
</div>

<h2>pages :
  <a href="#" onclick="showPages(1)">1</a>
  <a href="#" onclick="showPages(2)">2</a>
  <a href="#" onclick="showPages(3)">3</a>
</h2>

<h2>
  <span style="float: left;">
    <a href="#" onclick="showPages(current - 1)">Previous</a>
  </span>

  <span style="float: right;">
    <a href="#" onclick="showPages(current + 1)">Next</a>
  </span>
</h2><br><br>
0 голосов
/ 19 сентября 2018

Используйте скрытое поле ввода на каждой странице: при каждом щелчке устанавливайте pageIdValue, а когда вы нажимаете предыдущее или следующее добавление / вычитание 1 и переходите на эту страницу, как раньше 

<input type="hidden" id="pageId" name="pageId" value="pageIdValue">

...