Выгрузка скрытых DIV в другой DIV поочередно.
У меня есть вот такая конструкция. Мне нужно что бы DIV'ы с классом "opcii-opisanie" при нажатии на кнопку "input" подгружались в блок с именем "vyvod".
По умолчанию все дивы "opcii-opisanie" не видны (display: none). <div id="option-231" class="option"> <input value="31" id="option-value-31" type="radio"><label for="option-value-31"><span>1<div class="opcii-opisanie">Текст вывода 1</div></span></label> <input value="32" id="option-value-32" type="radio"><label for="option-value-32"><span>2<div class="opcii-opisanie">Текст вывода 2</div></span></label> <input value="33" id="option-value-33" type="radio"><label for="option-value-33"><span>3<div class="opcii-opisanie">Текст вывода 3</div></span></label> <input value="34" id="option-value-34" type="radio"><label for="option-value-34"><span>4<div class="opcii-opisanie">Текст вывода 4</div></span></label> <input value="35" id="option-value-35" type="radio"><label for="option-value-35"><span>5<div class="opcii-opisanie">Текст вывода 5</div></span></label> <input value="36" id="option-value-36" type="radio"><label for="option-value-36"><span>6<div class="opcii-opisanie">Текст вывода 6</div></span></label> </div> <div class="vyvod"> СЮДА ГРУЗИТЬ ТЕКСТ </div> В скриптах шарю не очень, пытался найти что то похожее, чтоб под себя переделать, но даже похожую конструкцию н нашёл(( Помогите пожалуйста кто чем может. |
var elems = document.querySelectorAll('.opcii-opisanie'),
vyvod = document.querySelector('.vyvod');
[].forEach.call(elems, function(self) {
var clone = self.cloneNode(true);
clone.style.display = 'block';
vyvod.appendChild(clone);
});
|
Цитата:
Оно сразу всё хватает и пихает его в блок "vyvod" а нужно что бы хватало каждую надпись отдельно при нажатой input, а при нажатии на другую input один "opcii-opisanie" превращался в "display: none" а новый становился соответственно видимым "display: block" |
Намудрил вот такую сборку, вроде работает как нужно.
НО можно как тто сделать это без "onclick="tykalka()"? а чтоб скрипт сам понимал как и что перехватывать?
<style>
.opcii-opisanie {
display: none;
}
.vyvod {
display: block;
width: 300;
height: 300px;
border: 1px solid red;
}
</style>
<form name="test2" method="post" action="input1.php">
<div id="option-231" class="option">
<input value="31" name="browser" id="option-value-31" type="radio" onclick="tykalka()"><label for="option-value-31"><span>1<div class="opcii-opisanie">Текст вывода 1</div></span></label>
<input value="32" name="browser" id="option-value-32" type="radio" onclick="tykalka()"><label for="option-value-32"><span>2<div class="opcii-opisanie">Текст вывода 2</div></span></label>
<input value="33" name="browser" id="option-value-33" type="radio" onclick="tykalka()"><label for="option-value-33"><span>3<div class="opcii-opisanie">Текст вывода 3</div></span></label>
<input value="34" name="browser" id="option-value-34" type="radio" onclick="tykalka()"><label for="option-value-34"><span>4<div class="opcii-opisanie">Текст вывода 4</div></span></label>
<input value="35" name="browser" id="option-value-35" type="radio" onclick="tykalka()"><label for="option-value-35"><span>5<div class="opcii-opisanie">Текст вывода 5</div></span></label>
<input value="36" name="browser" id="option-value-36" type="radio" onclick="tykalka()"><label for="option-value-36"><span>6<div class="opcii-opisanie">Текст вывода 6</div></span></label>
</div>
</form>
<div class="vyvod">
СЮДА ГРУЗИТЬ ТЕКСТ
</div>
<script type="text/javascript">
function tykalka() {
var elems = document.querySelectorAll('input:checked + label span .opcii-opisanie'), vyvod = document.querySelector('.vyvod');
[].forEach.call(elems, function(self) {
var clone = self.cloneNode(true);
clone.style.display = 'block';
vyvod.innerHTML = '';
vyvod.appendChild(clone);
});
}
</script>
|
elem.addEventListener('click', fn, false);
|
| Часовой пояс GMT +3, время: 09:55. |