Показ дочернего блока при активации checkbox
Написал код, который отображает/скрывает блок при активации отключении 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");
}
}
});
|
Aruta,
возможно вы неправильно используите id. лучше минимальный код, чем картинка. например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
<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> |
Aruta,
слишком много кода, если картинки (стрелка вверх/вниз) во всех блоках id="arrow" то var ia = document.getElementById('arrow'); это только первая картинка на всей странице. для поворота картинки не нужен ни id ни скрипт, что у вас не раскрывается непонятно, может дополните обьяснение проблемы? |
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>
|
class="upsale__block__bot-right__sub-wrap dflex" - этот блок должен открываться.
могу дать ссылку на проект в личку, если так удобней будет но не по id должны действия отслеживаться, а именно по родительскому-дочернему элементу |
Цитата:
|
Рони, простите. Я не тот id скинул:( Проверьте снова мой ответ - отредактировал. И кстати не могу понять как конкретно вам ответить - новичек на форуме:)
|
Цитата:
|
Aruta,
смотрите пост #5, что там не так? |
| Часовой пояс GMT +3, время: 20:43. |