Вход

Просмотр полной версии : Показ дочернего блока при активации checkbox

Aruta
03.10.2019, 16:54
Написал код, который отображает/скрывает блок при активации отключении checkbox, НО этот код применяется только к первому блоку почему-то, хотя я пишу так, чтобы смотрело от ближайшего родителя. Все блоки, у которых checkbox имеется, одинаковые по стилю.
При этом клик срабатывает на всех checkbox - хоть последний тыкай, но раскрывает только первый блок
Подскажите пожалуйста где ошибка.

Ссылка на скриншот со страницы сайта - http://prntscr.com/pedn0k


var checkON = document.querySelectorAll('input[type="checkbox"]');
checkON.forEach(function(check) {
check.onclick = function viewDesc(){
console.log('click');
var ia = document.getElementById('arrow');
var chpr = this.closest('.upsale__block__sub-right-wrap');
var chFin = chpr.children[1];
if (this.checked){
chFin.classList.toggle("dflex");
chFin.classList.toggle("dnone");
ia.classList.toggle("arrow-down");
} else {
chFin.classList.toggle("dnone");
ia.classList.toggle("arrow-down");
}
}
});
рони
03.10.2019, 17:11
Aruta,
возможно вы неправильно используите id.
лучше минимальный код, чем картинка.
например:


... минимальный код страницы с вашей проблемой


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Aruta
03.10.2019, 17:15
<div class="upsale__block__bot-wrap dflex">
<div class="upsale__block__bot-left"></div>
<div class="upsale__block__sub-right-wrap">
<div class="upsale__block__bot-right__title-wrap dflex">
<div class="block__bot-right__title dflex">
<input id="montage" type="checkbox" class="block__check"/>
<label for="montage" class="block__check">
<img id="arrow" src="http://test.vhost78896.cpsite.ru/catalog/view/theme/myown/image/arrowselect.png" alt="arrow_down"/>
Montage of the window
</label>
</div>
<div class="upsale__block__total dflex">30 000</div>
</div>
<div class="upsale__block__bot-right__sub-wrap dnone">
<div class="montage__content-wrap">
<span class="montage__text">intro text where we explain how this works and probably some checkboxes or input fields for customer to give extra info and image upload boxes</span>
<div class="montage__comp-wrap dflex">
<div class="montage__company-wrap dflex">
<div class="company__logo-wrap dflex">
<img class="company__img" src="catalog/view/theme/myown/image/advocaat.jpg"/>
</div>
<div class="company__desc-wrap">
<div class="company__desc__name-wrap">
<span>Company name</span>
<p>
<a href="Site of company">Site of company</a>
</p>
<div class="company__desc">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
</div>
</div>
</div>
<div class="company__stars-wrap">
<div class="stars"></div>
</div>
<div class="company__btn-wrap dflex">
<div class="company__btn">
<input type="button" value="Invite"/>
</div>
<div class="company__btn">
<input type="button" class="btn_more" value="Extra"/>
</div>
</div>
</div>
<div id="mtg_dsc_1" class="montage__more dnone dflex">
<div class="montage__photo">
<input type="file" name="file1" size="40" />
<input type="file" name="file2" size="40" />
<input type="file" name="file3" size="40" />
<input type="file" name="file3" size="40" />
</div>
<div class="montage__desc dflex">
<div class="montage__desc__text">
<textarea rows="4" name="text_descript_1"></textarea>
</div>
<div class="company__btn-wrap btn-inv dflex">
<input type="button" value="Invite"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
рони
03.10.2019, 18:36
Aruta,
слишком много кода, если картинки (стрелка вверх/вниз) во всех блоках id="arrow" то var ia = document.getElementById('arrow'); это только первая картинка на всей странице. для поворота картинки не нужен ни id ни скрипт, что у вас не раскрывается непонятно, может дополните обьяснение проблемы?
рони
03.10.2019, 18:41
Aruta,
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.dflex{
background-color: #FF00FF;
}
.dnone{
display: none;
}
.block__check:checked + label img{
transform: scaleY(-1);
}

</style>
</head>

<body>
<div class="upsale__block__bot-wrap dflex">
<div class="upsale__block__bot-left"></div>
<div class="upsale__block__sub-right-wrap">
<div class="upsale__block__bot-right__title-wrap dflex">
<div class="block__bot-right__title dflex">
<input id="montage" type="checkbox" class="block__check"/>
<label for="montage" class="block__check">
<img id="arrow" src="http://test.vhost78896.cpsite.ru/catalog/view/theme/myown/image/arrowselect.png" alt="arrow_down"/>
Montage of the window
</label>
</div>
<div class="upsale__block__total dflex">30 000</div>
</div>
<div class="upsale__block__bot-right__sub-wrap dnone">
<div class="montage__content-wrap">
<span class="montage__text">intro text where we explain how this works and probably some checkboxes or input fields for customer to give extra info and image upload boxes</span>
<div class="montage__comp-wrap dflex">
<div class="montage__company-wrap dflex">
<div class="company__logo-wrap dflex">
<img class="company__img" src="catalog/view/theme/myown/image/advocaat.jpg"/>
</div>
<div class="company__desc-wrap">
<div class="company__desc__name-wrap">
<span>Company name</span>
<p>
<a href="Site of company">Site of company</a>
</p>
<div class="company__desc">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
</div>
</div>
</div>
<div class="company__stars-wrap">
<div class="stars"></div>
</div>
<div class="company__btn-wrap dflex">
<div class="company__btn">
<input type="button" value="Invite"/>
</div>
<div class="company__btn">
<input type="button" class="btn_more" value="Extra"/>
</div>
</div>
</div>
<div id="mtg_dsc_1" class="montage__more dnone dflex">
<div class="montage__photo">
<input type="file" name="file1" size="40" />
<input type="file" name="file2" size="40" />
<input type="file" name="file3" size="40" />
<input type="file" name="file3" size="40" />
</div>
<div class="montage__desc dflex">
<div class="montage__desc__text">
<textarea rows="4" name="text_descript_1"></textarea>
</div>
<div class="company__btn-wrap btn-inv dflex">
<input type="button" value="Invite"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var checkON = document.querySelectorAll('input[type="checkbox"]');
checkON.forEach(function(check) {
check.onclick = function viewDesc(){
var chpr = this.closest('.upsale__block__sub-right-wrap');
var chFin = chpr.children[1];
chFin.classList.toggle("dflex");
chFin.classList.toggle("dnone");

}
});

</script>
</body>
</html>
Aruta
03.10.2019, 18:46
class="upsale__block__bot-right__sub-wrap dflex" - этот блок должен открываться.
могу дать ссылку на проект в личку, если так удобней будет
но не по id должны действия отслеживаться, а именно по родительскому-дочернему элементу
рони
03.10.2019, 18:51
id="mtg_dsc_1" - этот блок должен открываться.
код выше строка 66 уберите класс dnone
Aruta
03.10.2019, 19:00
Рони, простите. Я не тот id скинул:( Проверьте снова мой ответ - отредактировал. И кстати не могу понять как конкретно вам ответить - новичек на форуме:)
рони
03.10.2019, 19:14
class="upsale__block__bot-right__sub-wrap dflex"
так он открывается
рони
03.10.2019, 19:15
Aruta,
смотрите пост #5, что там не так?
Aruta
03.10.2019, 19:29
он открывается, но если размножить блок class="upsale__block__bot-wrap dflex" то работает только первый. Посмотрите ссылку http://test.vhost78896.cpsite.ru/index.php?route=checkout/cart
рони
03.10.2019, 20:11
Aruta,
не могу помочь, проблема слабо локализована, попробуйте сократить код. если размножить блок
можно пример где и как расположены эти блоки, пример это 10 строк а 70! уберите всё что не имеет значения для показа проблемы.

примерно так.
<div class="upsale__block__bot-wrap dflex">
<div class="upsale__block__bot-left"></div>
<div class="upsale__block__sub-right-wrap">
<div class="upsale__block__bot-right__title-wrap dflex">
<div class="block__bot-right__title dflex">
<input id="montage" type="checkbox" class="block__check"/>
<label for="montage" class="block__check">
<img id="arrow" src="http://test.vhost78896.cpsite.ru/catalog/view/theme/myown/image/arrowselect.png" alt="arrow_down"/>
Montage of the window
</label>
</div>
<div class="upsale__block__total dflex">30 000</div>
</div>
<div class="upsale__block__bot-right__sub-wrap dnone">
это блок который надо показать, добавьте второй в этот код
</div>
</div>
</div>
рони
03.10.2019, 20:43
Aruta,
попробуйте так ...
js
var checkON = document.querySelectorAll('input[type="checkbox"]');
checkON.forEach(function(check) {
check.onclick = function viewDesc(){
var title = this.closest('.upsale__block__bot-right__title-wrap');
var nextTitle = title.nextElementSibling;
nextTitle.classList.toggle("dflex");
nextTitle.classList.toggle("dnone");

}
});

css

.block__check:checked + label img{
transform: scaleY(-1);
}
Aruta
09.10.2019, 07:51
Aruta,
попробуйте так ...
js
var checkON = document.querySelectorAll('input[type="checkbox"]');
checkON.forEach(function(check) {
check.onclick = function viewDesc(){
var title = this.closest('.upsale__block__bot-right__title-wrap');
var nextTitle = title.nextElementSibling;
nextTitle.classList.toggle("dflex");
nextTitle.classList.toggle("dnone");

}
});

css

.block__check:checked + label img{
transform: scaleY(-1);
}

Простите, не мог ответить. оказалось проблемы не было, кроме моего незнания о браузере...

Беда была такая - если не добавлять в файле, а добавлять в браузере блоки, то не работает. Но когда мне надоело добавлять каждый раз в браузере блок и я добавил в файле его...

Оказалось что всё работает:)