Как можно одновременно скрыть и показать несколько элементов div и изменить содержимое кнопок? - PullRequest
Новая
       0

Как можно одновременно скрыть и показать несколько элементов div и изменить содержимое кнопок?

0 голосов
/ 24 марта 2019

Я пытаюсь скрыть div и изменить текстовое содержимое кнопок одновременно.

Проблема: Проблема, с которой я столкнулся, заключается в том, что div скрыт, носодержимое кнопки не изменяется.

Я буду использовать несколько кнопок, чтобы скрыть и показать несколько изображений и текстов.

HTML 

 <div class="hide-show-divs">
   <p>Some content in a div</p>
   <p>More content in a div</p>
 </div>

 <div class="hide-show-divs">
   <p>Some content in a div</p>
   <p>More content in a div</p>
 </div>

Кнопка 

<div>
  <button class="hide-show-divs-btn" onclick="toggle()">Hide Divs</button>
</div>

JavaScript 

function toggle() {
  var hideShowDivs = document.getElementsByClassName("hide-show-divs");
  for(var i = 0; i < hideShowDivs.length; i++){
    if (hideShowDivs[i].style.display === "none") {
      hideShowDivs[i].style.display = "block";
      changeBtnText();
    } else {
      hideShowDivs[i].style.display = "none";
    }
  }
}

function changeBtnText() {
  var hideShowImgBtn = document.getElementsByClassName("hide-show-divs-btn");
  for(var i = 0; i < hideShowImgBtn.length; i++)
    if(hideShowImgBtn[i].value =="Show divs") {
      hideShowImgBtn[i].value = "Hide divs";
    }else {
      hideShowImgBtn[i].value = "Show divs";
    }
  }

Что должно произойти:

  1. При первом нажатии на кнопку - я хочу, чтобы элементы div были скрыты кака также текст в этой кнопке, чтобы изменить на «Показать Divs».

  2. Во второй раз, когда я нажимаю на кнопку - я хочу, чтобы отображались div и текст в этомкнопку, которую нужно изменить на «Скрыть разделы».

Ответы [ 2 ]

2 голосов
/ 24 марта 2019

У вас уже есть большая часть функциональности, всего несколько проблем

  1. Кнопка обтекания div содержит кавычки, ошибка synatx
  2. внутри функции переключения вам нужно вызвать changeBtnText для того, чтобы изменить
  3. не имеет значения, так что если вы потерпите неудачу, вы можете использовать для нее innerText 

function toggle() {
  var hideShowDivs = document.getElementsByClassName("hide-show-divs");
  changeBtnText(); // Invoking changeBtnText added
  for(var i = 0; i < hideShowDivs.length; i++){
    if (hideShowDivs[i].style.display === "none") {
      hideShowDivs[i].style.display = "block";
      changeBtnText();
    } else {
      hideShowDivs[i].style.display = "none";
    }
  }
}

function changeBtnText() {
  var hideShowImgBtn = document.getElementsByClassName("hide-show-divs-btn");
  for(var i = 0; i < hideShowImgBtn.length; i++)
    // Using innerText instead of value
    if(hideShowImgBtn[i].innerHTML =="Show divs") {
      hideShowImgBtn[i].innerHTML = "Hide divs";
    }else {
      hideShowImgBtn[i].innerHTML = "Show divs";
    }
  }
0 голосов
/ 24 марта 2019

Вы можете использовать JQuery ведьму гораздо проще:

Первый шаг: добавление jQuery 

 <head>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 </head>

Теперь код: 

   $(".hide-show-divs-btn").click(function() {

      $( ".hide-show-divs" ).toggle();




      $(this).text() === 'Hide Divs'
      ? $(this).text('Show Divs')
      : $(this).text('Hide Divs')

     })
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...