Использование javascript для нескольких элементов

Question

Я хотел бы обрабатывать несколько элементов, которые требуют определенной функциональности на нашей стадии разработки для переключаемых кнопок, которые открывают и закрывают div. Я говорю toggle-like, потому что это не ваша стандартная настройка переключения.

Код У меня есть работы для одного экземпляра кнопок и контейнера. Теперь мне нужно научиться применять это к еще десятку, которые должны функционировать независимо друг от друга.

Эта скрипка показывает четыре примера, где первая кнопка CSS является единственной, работающей.

https://jsfiddle.net/e2fexbqp/12/

Это код, который создает рабочий пример одного блока - две кнопки и наш DIV - который должен быть функциональным для ряда других областей кнопки/дел.

HTML

<a class="button" id="open">Open</a> 

<div id="click-drop" style="display:none"> 

<h2>Hello World</h2> 
<p>You can see me! I'm open! Type your code below.</p> 
<textarea></textarea> 
<p><a class="button" id="close" style="display:none">Close</a></p> 

</div> 

Javascript

var open = document.getElementById("open"); 
var close = document.getElementById("close"); 

function show(target) { 
    document.getElementById(target).style.display = 'block'; 
} 
function hide(target) { 
    document.getElementById(target).style.display = 'none'; 
} 
function hideButton() { 
    var x = document.getElementById("open"); 
    x.style.display = "none"; 
    var x = document.getElementById("close"); 
    x.style.display = ""; 
} 
function showButton() { 
    var x = document.getElementById("open"); 
    x.style.display = ""; 
    var x = document.getElementById("close"); 
    x.style.display = "none"; 
} 
open.onclick = function() {show('click-drop');hideButton()} 
close.onclick = function() {hide('click-drop');showButton() 

Я хотел бы что-то чистым и лаконичным, а также ненавязчиво.

Answer 1

Поясним некоторые моменты:

1. идентификаторы в HTML, на странице, должно быть уникальным.
2. Используя классы и jQuery, вы можете достичь этого довольно легко.
3. Я добавил пролет над всей «открытой кнопкой + его соответствующей зоной», чтобы установить класс «зона»
4. Я поместил «открытый» класс во все открытые ссылки.
5. Я поставил «близкий» класс ко всем близким ссылкам.
6. Я зарегистрировал клик для элементов .zone .open, чтобы они прятались и отображали содержащиеся в них DIV.
7. Я зарегистрировал клик для элементов «.zone .close», чтобы они спрятали DIV под элементом «.zone», содержащим их, и покажите ссылку «.open» под ними.

Так вот что я сделал: https://jsfiddle.net/e2fexbqp/13/

$(document).ready(function() { 
 
\t $('.zone .open').click(function() { 
 
    \t $(this).hide(); 
 
    $(this).parent().find('div').show(); 
 
    }); 
 
    $('.zone .close').click(function() { 
 
    \t var parent = $(this).parents('.zone'); 
 
    \t parent.children('div').hide(); 
 
    parent.children('a.open').show(); 
 
    }); 
 
});

.button { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    font-size: 13px; 
 
    line-height: 26px; 
 
    height: 28px; 
 
    margin: 0; 
 
    padding: 0 10px 1px; 
 
    cursor: pointer; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    -webkit-appearance: none; 
 
    -webkit-border-radius: 3px; 
 
    border-radius: 3px; 
 
    white-space: nowrap; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.zone div { 
 
    border: solid 1px; 
 
    border-radius: 3px; 
 
    padding: 10px 25px; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h1>Header Content</h1> 
 

 
<span class="zone"> 
 
<a class="button open">CSS</a> 
 

 
<div> 
 
        
 
<p>Header style</p> 
 
<textarea></textarea> 
 
<p><a class="button close">Close</a></p> 
 
\t \t \t \t 
 
</div> 
 
</span> 
 

 
<span class="zone"> 
 
<a class="button open">HTML</a> 
 

 
<div> 
 
<p>Header content</p> 
 
<textarea></textarea> 
 
<p><a class="button close">Close</a></p> 
 
\t \t \t \t 
 
</div> 
 
</span> 
 
<h1>Footer Content</h1> 
 
<span class="zone"> 
 
<a class="button open">CSS</a> 
 

 
<div> 
 
        
 
<p>Footer style</p> 
 
<textarea></textarea> 
 
<p><a class="button close">Close</a></p> 
 
\t \t \t \t 
 
</div> \t 
 
</span><span class="zone"> 
 
<a class="button open">HTML</a> 
 

 
<div> 
 
        
 
<p>Footer content</p> 
 
<textarea></textarea> 
 
<p><a class="button close">Close</a></p> 
 
\t \t \t \t 
 
</div> 
 
</span>

Answer 2

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

anchors = doc.getElementsByClassName("button"); 
for (var i = 0; i < anchors.length; i++) {  
    anchors[i].addEventListener("click", function(e){ 
     e.target.classList.toggle('hide'); 
    }); 
} 

Answer 3

Эта демонстрация представляет собой чистый JavaScript, как указано в тегах и подразумевается предоставленным кодом в вопросе. Он имеет только один eventListener и несколько event.targets BTW, уникальные идентификаторы могут быть переданы только одному элементу. Вы не можете иметь несколько идентификаторов с одинаковым значением. Итак, вы заметите, что я использовал только классы без идентификаторов.

Преимущества

• Pure JavaScript и зависимостей от плагинов.
• Кросс-браузер с современными браузерами.
• Использование только одного eventListener очень эффективно.
• Он точно определяет, какую кнопку нажать, не создавая массив, или NodeList для повторения в цикле.

Недостатки

• Если вы должны быть совместимы с IE9, то classList должен быть заменен className.

• HTML-макет должен быть в строгом шаблоне. Ключевые элементы должны располагаться в заданной последовательности. Это не проблема, если у вас есть привычка делать организованные шаблоны в разметке.

Пошаговое описание прокомментировано в источнике.

FIDDLE

SNIPPET

// Reference the parent element 
 

 
var box = document.querySelector('.box'); 
 
// add an eventListener to parent 
 

 
box.addEventListener('click', toggleBtn, false); 
 

 
function toggleBtn(event) { 
 
    /* This will prevent the <a>nchors from 
 
    behaving like normal anchors which 
 
    jump from one location to another 
 
    */ 
 
    event.preventDefault(); 
 
    // event.target is the element that was clicked (.open/.close .button) 
 
    // event.currentTarget is the element that listens for an event (.box) 
 

 
    if (event.target != event.currentTarget) { 
 
    var clicked = event.target; 
 

 
    /* If the clicked element has .open class 
 
    find the sibling element that was before it and 
 
    show it by adding .show class and removing .hide 
 
    Then hide clicked element. 
 
    */ 
 
    if (clicked.classList.contains('open')) { 
 
     var drop = clicked.previousElementSibling; 
 
     drop.classList.remove('hide'); 
 
     drop.classList.add('show'); 
 
     clicked.classList.remove('show'); 
 
     clicked.classList.add('hide'); 
 
    } else { 
 
     /* Else find clicked parent and hide it 
 
     and then show the parent's sibling that is after it. 
 
     */ 
 
     var drop = clicked.parentElement; 
 
     var open = drop.nextElementSibling; 
 
     drop.classList.remove('show'); 
 
     drop.classList.add('hide'); 
 
     open.classList.remove('hide'); 
 
     open.classList.add('show'); 
 
    } 
 
    } 
 
    /* This prevents the bubbling phase from continuing 
 
    up the event chain and triggering any unnecessary 
 
    eventListeners 
 
    */ 
 
    event.stopPropagation(); 
 
}

* { 
 
    /* Prefix no longer needed */ 
 
    box-sizing: border-box; 
 
} 
 
.box { 
 
    /* Just for demo */ 
 
    border: 1px dashed red; 
 
} 
 
.button { 
 
    text-decoration: none; 
 
    font-size: 13px; 
 
    line-height: 26px; 
 
    height: 28px; 
 
    width: 48px; 
 
    margin: 0; 
 
    padding: 1px; 
 
    cursor: pointer; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    -webkit-appearance: none; 
 
    /* Prefix no longer needed for years */ 
 
    border-radius: 3px; 
 
    text-align: center; 
 
} 
 
.click-drop { 
 
    border: solid 1px; 
 
    border-radius: 3px; 
 
    padding: 10px 25px; 
 
} 
 
.hide { 
 
    display: none; 
 
} 
 
.show { 
 
    display: block; 
 
} 
 
.button.show { 
 
    display: inline-block; 
 
} 
 
.close { 
 
    display: block; 
 
}

<!--[The order in which elements are positioned is important which will be evident when you review the JavaScript]--> 
 

 
<!--.box is the 'ancestor/parent' element and event.currentTarget--> 
 

 
<section class="box"> 
 
    <h1>Header Content</h1> 
 
    <!--Each .click-drop is initially hidden hence it has .hide as a class as well--> 
 

 
    <div class="click-drop hide"> 
 
    <!--All descendants/children of each .click-drop inherits display:none prop/val from .click-drop.hide--> 
 

 
    <p>Header style</p> 
 
    <textarea></textarea> 
 
    <a class="close button">Close</a> 
 
    </div> 
 
    <!--Each .open.button follows it's corresponding .click-drop--> 
 

 
    <a class="open button show">CSS</a> 
 

 

 
    <div class="click-drop hide"> 
 
    <p>Header content</p> 
 
    <textarea></textarea> 
 
    <a class="close button">Close</a> 
 
    </div> 
 
    <a class="open button show">HTML</a> 
 

 
    <h1>Footer Content</h1> 
 

 
    <div class="click-drop hide"> 
 
    <p>Footer style</p> 
 
    <textarea></textarea> 
 
    <a class="close button">Close</a> 
 
    </div> 
 
    <a class="open button show">CSS</a> 
 

 

 
    <div class="click-drop hide"> 
 
    <p>Footer content</p> 
 
    <textarea></textarea> 
 
    <a class="close button">Close</a> 
 
    </div> 
 
    <a class="open button show">HTML</a> 
 

 
</section>