Удалить активный класс, нажав на элемент брата родителя в JavaScript

Question

Я работаю над созданием сценария карты, состоящего из двух этапов. Выбор карты> открывает соответствующее окно справа Нажатие кнопки «Применить сейчас» в этом открывшемся окне> открывает соответствующее окно внизу.

В настоящее время все работает по назначению, кроме: (.gaccaiGET), тем самым удаляя нижний div (.gara). Прямо сейчас он активирует «Получить карту», ​​даже если вы деактивируете селектор карт.

Независимо от того, как я стараюсь (с помощью навыков начинающего js), я не могу заставить его работать.

Кроме того, если вы посмотрите на html и css, вы увидите, что большинство элементов позиционируются как абсолютные, что является очень плохим способом сделать эту работу. К сожалению, я не мог понять способ сделать положение относительно, потому что

.divclass.active + .otherdivclass { css } 

работает только для брата элементов, и, даже, только для элементов брата, которые находятся рядом друг с другом. Это привело к написанию бедных html и css, чтобы они выглядели и работали так, как я этого хочу. Если у вас есть какие-либо советы по этому вопросу, пожалуйста, дайте мне знать!

Благодаря

http://jsfiddle.net/4XM9A/10/

(function() { 
    var links = Array.prototype.slice.call(document.querySelectorAll('.gacca1')); 
    var links2 = Array.prototype.slice.call(document.querySelectorAll('.gacca2')); 
    var links3 = Array.prototype.slice.call(document.querySelectorAll('.gaccaiGET')); 

    var toggleClass = function (className, element) { 
     element.classList.toggle(className); 
    }; 

    var clickHandler = function (linksToDisable) { 
     return function() { 
      toggleClass('active', this); 
      linksToDisable.filter(function (link) { 
       return link.classList.contains('active'); 
      }) 
      .forEach(function (link) { 
       toggleClass('active', link); 
      }); 

     }; 
    }; 

    links.forEach(function (link) { 
     link.addEventListener('click', clickHandler(links2)); 
    }); 
    links2.forEach(function (link) { 
     link.addEventListener('click', clickHandler(links)); 
    }); 
    links3.forEach(function (link) { 
     link.addEventListener('click', function() { 
      toggleClass('active', this); 
     }); 
    }); 
}()); 

Answer 1

Насколько я понимаю, вы должны сначала переключить «.active» всех дивы из «.gaccai», который идет после «.active» родителя. Попробуйте изменить функцию toggleClass немного:

var toggleClass = function (className, element) { 
     var array = document.querySelectorAll('.' + element.classList + ' + .gaccai .active'); 
     for (var i = 0; i < array.length; i++) { 
      array[i].classList.toggle(className); 
     } 
     element.classList.toggle(className); 
    };