#javascript #html #css
#javascript #HTML #css
Вопрос:
Я работаю над скриптом get a card, который состоит из 2 этапов. Выбор карточки > открывает соответствующее окно справа, нажатие кнопки Применить сейчас в этом открытом окне > открывает соответствующее окно внизу.
Прямо сейчас все работает так, как задумано, за исключением: я хочу сделать так, чтобы, если пользователь удаляет выделенную карту (.gacca1 / .gacca2), он также удалял «активированный» класс из div «Получить карту» (.gaccaiGET), таким образом удаляя нижний div (.gara). Прямо сейчас «Получить карточку» остается активированным, даже если вы деактивируете селектор карточек.
Как бы я ни старался (с моими навыками js для начинающих), я не могу заставить это работать.
Кроме того, если вы посмотрите на html и css, вы увидите, что большинство элементов расположены абсолютно, что является очень плохим способом заставить это работать. К сожалению, я не смог придумать способ сделать позиции относительными, потому что
.divclass.active .otherdivclass { css }
работает только для элементов brother, и даже только для элементов brother, которые находятся рядом друг с другом. Что привело к написанию плохих html и css, чтобы заставить его выглядеть и работать так, как я хочу. Если у вас есть какие-либо советы по этому вопросу, пожалуйста, дайте мне знать!
Спасибо
(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);
});
});
}());
Комментарии:
1. большинство элементов позиционируются абсолютно на самом деле абсолютное позиционирование является другом CSS selector, в некоторых случаях обычно CSS selector не может выбрать элемент, но если вы поменяете элементы местами и используете абсолютное позиционирование для их позиционирования, CSS selector будет работать.
2. Я не понимаю, в чем здесь проблема, демонстрация, похоже, в порядке, при выборе элемента слева отобразится кнопка Get card … повторное нажатие на нее скроет эту кнопку. Разве это не то, чего вы хотите?
3. Итак, вы не видите проблемы с css и html? Приятно знать! Что касается проблемы Javascript, я имел в виду, что как только вы нажимаете на кнопку «Получить карточку» в открывшемся окне — открывается другое окно. Это окно больше не закрывается, как только вы удаляете выбор карты. КАРТОЧКА > ОКНО КАРТОЧКИ > ПОЛУЧИТЬ ОКНО КАРТОЧКИ. Когда вы закрываете «ОКНО КАРТОЧКИ», окно «ПОЛУЧИТЬ КАРТОЧКУ» также должно автоматически закрываться, и когда вы снова открываете ту же самую «КАРТОЧКУ», в ней не должно отображаться ранее открытое ОКНО «ПОЛУЧИТЬ КАРТОЧКУ». Надеюсь, я объяснил достаточно хорошо.
4. Я не вижу никаких видимых окон, которые открываются или закрываются, все так называемые окна отображаются изначально , я не заглядывал в HTML-код, но чтобы было понятнее, мы должны знать, как открывается / закрывается окно. И, может быть, как выглядит окно? все они выглядят как обычные элементы с рамкой (и, как я уже сказал, они отображаются изначально, не дожидаясь, пока вы нажмете или выберете что-то).
5. screencast.com/t/DsrY1I02L7W Как я показал здесь — вы нажимаете 1> открывает 1. Нажмите 2 > открывает 2. При повторном нажатии 2 — закрывается 2. При повторном нажатии 1 — закрывается 1. НО, если вы нажмете 1 > открывает 1, нажмите 2 > открывает 2, а затем снова нажмите 1 — он закрывает 1, и если вы нажмете 1 снова — он открывает 1 с уже открытыми 2. Я пытаюсь сделать так, чтобы при закрытии 1 он автоматически закрывал 2 внутри, чтобы при повторном нажатии 1 2 автоматически не открывался, потому что он уже был активирован ранее.
Ответ №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);
};
Комментарии:
1. Спасибо, это работает довольно хорошо! Это выглядит довольно странно, особенно с i , но, думаю, я пойму это позже в моем путешествии.