Предотвращать многообразные toggle с тем же классом

Для события toggle с сигарой javascript я это разрабатываю следующей формы:

Javascript

 // Esta clase lo expande.
const expandButton = document.querySelector('.expand-button');
expandButton.addEventListener('click', ()=> {
    //Esta es la clase que muestra el contenido.
    const more = document.querySelector('.more');
   //El contenido pasa de oculto a ser visible.
   more.style.display = 'block';
  //Oculto la imagen al expandir.
   if (more.style.display === 'block') {
       expandButton.style.display = 'none';
   }
}, false);

HTML

<div class="more"> Contenido 1 </div> <!-- El contenido -->
<div class="expand-button">Expandir</div> <!-- Botón que expande -->

Проблема, - в котором, если у меня есть другой toogle с тем же классом

<div class="more"> Contenido 2 </div> <!-- El contenido -->
<div class="expand-button">Expandir</div> <!-- Botón que expande -->

Я был бы должен возвращать элементы с классом expand-button с for (), когда я это делаю, кнопка расширять второго toggle открывает первого, и первый реализует Вашу функцию правильно.

Какое-то решение?

1
задан 10.08.2016, 19:05
3 ответа

Проблема происходит из-за этой линии кода:

const more = document.querySelector('.more');

Поскольку ты делаешь выбор с querySelector и есть несколько элементов с классом "обитайте", тогда браузер оставляет себе только первого, нажми на кнопку расширения, что ты нажал.

Возможное решение состояло бы, если ты можешь, в том, чтобы добавлять один data-atributo в кнопку расширения, что я показал ему, который .more будь должен открываться (и добавлять один пойдите в каждый из контейнеров). Немного как это:

<div id="contenido1" class="more"> Contenido 1 </div>
<div class="expand-button" data-toggle="#contenido1">Expandir</div>

<div id="contenido2" class="more"> Contenido 2 </div>
<div class="expand-button" data-toggle="#contenido2">Expandir</div>

Тогда язык сценариев JavaScript изменился бы, чтобы выбирать не ".more" а id, определенный в data-toggle. Здесь я оставляю пример функционируя:

const expandButton = document.querySelectorAll('.expand-button');

expandButton.forEach(function(el, arr) {
    el.addEventListener('click', (e)=> {
        //Esta es la clase que muestra el contenido.
        var more = document.querySelector(e.target.dataset.toggle);
        //El contenido pasa de oculto a ser visible.
        more.style.display = 'block';
        //Oculto la imagen al expandir.
        if (more.style.display === 'block') {
            el.style.display = 'none';
        }
    }, false);
});
.more { display:none }
<div id="contenido1" class="more"> Contenido 1 </div>
<div class="expand-button" data-toggle="#contenido1">Expandir</div>

<div id="contenido2" class="more"> Contenido 2 </div>
<div class="expand-button" data-toggle="#contenido2">Expandir</div>

Обновление: поскольку о нем упоминают в комментариях, код представляет проблемы в каких-то versions Internet Explorer. Это происходит, потому что используется пара вещей (forEach и нотация => для функций), что не хорошо вынесены в "старых" версиях IE.

Эти проблемы могут быть решены простым способом:

  • Меняясь forEach из-за цикла for простой (и ссылки в el из-за ссылок на элемент внутри array, который пересекается)
  • Меняясь (e) => { ... } из-за традиционного function(e) { ... }

С этими двумя изменениями, код уже функционирует в Chrome, Firefox и Internet Explorer:

const expandButton = document.querySelectorAll('.expand-button');

for (var x = 0; x < expandButton.length; x++) {
    expandButton[x].addEventListener('click', function(e) {
        //Esta es la clase que muestra el contenido.
        var more = document.querySelector(e.target.dataset.toggle);
        //El contenido pasa de oculto a ser visible.
        more.style.display = 'block';
        //Oculto la imagen al expandir.
        if (more.style.display === 'block') {
            e.target.style.display = 'none';
        }
    }, false);
}
.more { display:none }
<div id="contenido1" class="more"> Contenido 1 </div>
<div class="expand-button" data-toggle="#contenido1">Expandir</div>

<div id="contenido2" class="more"> Contenido 2 </div>
<div class="expand-button" data-toggle="#contenido2">Expandir</div>
2
ответ дан 24.11.2019, 13:40
  • 1
    Большое спасибо, вот то, что он искал, для toggle ему это было ясно, проблема приходила с более чем 1. Хороший soluci и # 243; n. Привет! – UnderZero_- 10.08.2016, 19:28
  • 2
    Удалите другой комментарий, из-за которого уже, который происходит, IE8 и IE 11 люди жалуются на forEach (), кажется, что оно не функционирует. Я буду искать soluci и # 243; n совместимый с IE. Если ты подтверждаешь твой soluci и # 243; n в IE ты увидишь, что он дает тебе ошибку в forEach (), и дело в том, что Microsoft вынуждает нас работать с frameworks по вине этих tonter и # 237; схвати, я провожу 12 часов часов для того, чтобы toggle был совместим во всех браузерах, это не является производительным. – UnderZero_- 11.08.2016, 12:23
  • 3
    @UnderZero_ - Эта проблема решается меняя forEach на цикл for cl и # 225; sico. Adem и # 225; s, tendr и # 225; s, который часть (e) => менять, потому что он не удается в IE tambi и # 233; n. Я обновил ответ, чтобы показывать versi и # 243; n, что функционировал в Chrome, Firefox и IE (протестированный в 11, который состоит в том, что есть у этой м и # 225; хина) – Alvaro Montoro♦ 11.08.2016, 14:11
  • 4
    @AlavaroMontoro я понял, поэтому сослался на твой ответ обновляя это в for cl и # 225; sico. Относящийся к notaci и # 243; n = > в 11, если, что я функционирует, или я верю в это, я брошу беглый взгляд, но я верю в то, что если. Спасибо снова. Хороший d и # 237; в – UnderZero_- 11.08.2016, 14:25

Ты можешь проплывать DOM с botГіn к предыдущему брату, используя собственность previousSibling.

Таким образом ты получаешь <div> предыдущий в структуре и расширяешь только этот.

Немного asГ-: (fГ-jate, что использовал this.previousSibling, что выбирает Гєnicamente предыдущий брат botГіn на том, который ты кликаешь)

const expandButton = document.querySelectorAll('.expand-button');
expandButton.addEventListener('click', ()=> {

   const more = this.previousSibling; // aqui se usaria

   //El contenido pasa de oculto a ser visible.
   more.style.display = 'block';
  //Oculto la imagen al expandir.
   if (more.style.display === 'block') {
       expandButton.style.display = 'none';
   }
}, false);

, Имей в виду, что это функционирует со структурой HTML, которую ты помещаешь в вопрос, если ты меняешь структуру, будет необходим modifacar код, чтобы ходить в правильную составную часть.

я рекомендую Тебе читать о других сходных свойствах объекта Node такие как nextSibling, parentNode, и т.д.

БОЛЬШЕ.

я заканчиваюсь понимать, что форма, в которой ты устанавливаешь listener, не функционировала для всех пуговиц с классом .expand-button. Это проистекает, в который querySelector взятие Гєnicamente первая составная часть, которая выполняет query.

, Чтобы назначать handler во все пуговицы, ты будешь должен использовать querySelectorAll и потом повторять на результате, чтобы назначать manejador во все составные части.

Для ES2015:

var expandButtons = document.querySelectorAll('.expand-button');

Array.from(expandButtons).forEach(button => {
    button.addEventListener('click', function(event) {

        const more = this.previousSibling; 
        /// resto del código aquí.

    });
});
1
ответ дан 24.11.2019, 13:40
  • 1
    Привет @rnd, структура не та же самая, есть несколько div и секций между ними, я это поместил туз и # 237; для того, чтобы он не был таким обременительным, напечатав это aqu и # 237;. Это проблема, только повторяя он я идет правильно, но показав текст класса, обитайте первая это показывает и второй открывает первую. Я буду бросать беглый взгляд в эти свойства. – UnderZero_- 10.08.2016, 19:14
  • 2
    Привет @UnderZero_, - Спасибо за довождение до сведения, можешь ли ты попробуй обобщать структуру (только структура escencial, без contentido) так возможно давать ответ на полную проблему. Привет – rnrneverdies 10.08.2016, 19:16
  • 3
    Он готовил структуру для того, чтобы показывать ее и @AlvaroMontoro напечатал soluci и # 243; n. Большое спасибо так или иначе, я буду осведомляться немного больше на свойствах объекта Node. Привет. – UnderZero_- 10.08.2016, 19:24
  • 4
    Не за что! решение alvaro очень хорошее – rnrneverdies 10.08.2016, 19:26

Ответ, что ofreciГі Альваро Монторо правилен, но у него есть handicap, IE не выносит forEach () , asГ - что продолжая линию, которую нам показывает Альваро, я был должен менять forEach на for , таким образом, toggle функционирует tambiГ©n в IE.

Надеялся, что он служит вам помощью, как он это был в меня.

const expandButton = document.querySelectorAll('.expand-button');
for (let i = 0; i < expandButton.length; i++) {
    var element = expandButton[i];

    element.addEventListener('click', (e) => {
        var more = document.querySelector(e.target.dataset.toggle);
        more.style.display = 'block';   
    }, false);
}
.more { display:none }
<div id="contenido1" class="more"> Contenido 1 </div>
<div class="expand-button" data-toggle="#contenido1">Expandir</div>

<div id="contenido2" class="more"> Contenido 2 </div>
<div class="expand-button" data-toggle="#contenido2">Expandir</div>
0
ответ дан 24.11.2019, 13:40

Теги

Похожие вопросы