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

Question

Я пытаюсь создать веб-страницу, где у меня есть список кнопок, и каждая кнопка переключает видимость div непосредственно под ним.

Проблема, с которой я сталкиваюсь, заключается в том, что все мои кнопки только переключают видимость последнего div на моей странице.

Вот следующий соответствующий код:

HTML

<div class="menuItem"> 
    <button>Food Item</button> 
    <div class="info"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <img src="../images/menu/spaghetti.jpg" alt="spaghetti"> 
    </div> 
</div> 
<div class="menuItem"> 
    <button>Food Item</button> 
    <div class="info"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <img src="../images/menu/spaghetti.jpg" alt="spaghetti"> 
    </div> 
</div> 
<div class="menuItem"> 
    <button>Food Item</button> 
    <div class="info"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <img src="../images/menu/spaghetti.jpg" alt="spaghetti"> 
    </div> 
</div> 

А вот мой JavaScript:

"use strict"; 

(function() { 
    var menuItems = document.getElementsByClassName("menuItem"); 

    for(var ii = 0; ii < menuItems.length; ii++) { 
     var button = menuItems[ii].getElementsByTagName("button")[0]; 
     var info = menuItems[ii].getElementsByClassName("info")[0]; 
     button.onclick = function() { 
      if(info.style.display === "block") { 
       info.style.display = "none"; 
      } else { 
       info.style.display = "block"; 
      } 
     }; 
    } 
})(); 

Я не думаю, что я полностью понимаю, что браузер делает под капот. Я думаю, что получаю ссылки на каждую отдельную кнопку, но похоже, что когда я меняю метод onclick на одну кнопку, я меняю метод onclick для всех. Почему это происходит, и как я могу это предотвратить?

Answer 1

Использование JQuery, это просто:

$('.toggle').click(function() { 
    $(this).next().toggle(); 
}); 

Я добавил «класс =„тумблер“» на каждую кнопку Вот скрипка:. https://jsfiddle.net/mckinleymedia/tx4tsvfa/

Answer 2

Попробуйте определения info в click обработчика используя .nextElementSibling

(function() { 
 
    "use strict"; 
 
    var menuItems = document.getElementsByClassName("menuItem"); 
 

 
    for (var ii = 0; ii < menuItems.length; ii++) { 
 
    var button = menuItems[ii].getElementsByTagName("button")[0]; 
 
    button.onclick = function() { 
 
     var info = this.nextElementSibling; 
 
     if (info.style.display === "block") { 
 
     info.style.display = "none"; 
 
     } else { 
 
     info.style.display = "block"; 
 
     } 
 
    }; 
 
    } 
 
})();

.info { 
 
    display: none; 
 
}

<div class="menuItem"> 
 
    <button>Food Item</button> 
 
    <div class="info"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <img src="../images/menu/spaghetti.jpg" alt="spaghetti"> 
 
    </div> 
 
</div> 
 
<div class="menuItem"> 
 
    <button>Food Item</button> 
 
    <div class="info"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <img src="../images/menu/spaghetti.jpg" alt="spaghetti"> 
 
    </div> 
 
</div> 
 
<div class="menuItem"> 
 
    <button>Food Item</button> 
 
    <div class="info"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <img src="../images/menu/spaghetti.jpg" alt="spaghetti"> 
 
    </div> 
 
</div>

Answer 3

событий Делегация

Существует гораздо более простой способ сделать это. Добавить родительский контейнер

<div id="container"> 
<div class="menuItem"> 
..... 

Создание пользовательского Нажмите кнопку обработчик для родительского контейнера

function handler(e){ 
console.dir(e.target);//maybe console.log(e.target); 
// or console.dir(e.target.parentNode); 
} 
document.getElementById('container').addEventListener('click',handler,false); 

Проверьте консоль во время нажатия. Есть много полезного сведения о клике элемента и его ParentNode

---

В вашем случае:

function handler(e){ 
if(e.target.nodeName=='BUTTON'){//if i click on the correct element 
    e.target.parentNode.getElementsByClassName('info')[0].classList.toggle('view'); 
} 
} 

classListnodeNameparentNodetarget

здесь есть пользовательский класс шкура.

.view{ 
display:none; 
} 

Я также хотел бы избежать display:none браузер должен перерисовывать весь элемент everytime.think из top:-999999px; opacity:0; height:justthebuttonsize; transform:scale(0);

Прохладная часть этого является то, что у вас есть только одно событие! Нет петель! И еще много преимуществ. Вам даже не нужно document.getElementsByClassName, если вы переходите через узлы (что намного быстрее) .Ahh и это все чисто родной javascript.

http://jsfiddle.net/z6kk5rxc/2/

, если вы не понимаете, что-то просто спросите

Answer 4

Вы можете использовать JQuery, чтобы сделать это. Вы можете определить функцию (назовем ее toggleInfo и поместить его в OnClick атрибута следующим образом:

<button onclick="toggleInfo()">Food Item</button> 

И тогда в вашей функции вы можете использовать .toggle() на ближайший элемент с классом info