Я пытаюсь отобразить конкретные формы при выборе определенных переключателей.
Вот переключатели: -
<input type="radio" name="condition" value="working" id="condition">
<input type="radio" name="condition" value="workingdamaged" id="condition">
<input type="radio" name="condition" value="notworking" id="condition">
Когда мы выбираем рабочее радио, нужно открыть другую форму. Когда мы выбираем нерабочую, должна быть другая форма.
Первоначально я делал это с помощью document.getElementById("demo"). InnerHTML, но мне было предложено использовать слишком много форм внутри innerHTML, это не очень хорошая идея. Тогда как лучше всего выполнить эту задачу?
Любые предложения приветствуются.
Самый простой способ, которым я могу думать, - использовать атрибуты данных для обращения к соответствующим элементам формы из выбранного переключателя.
Все, что нам нужно сделать, это сопоставить переключатель с 'data-form = "working"' в конкретной форме с id 'working'
Пример кода выглядит так:
$("form").hide();
$("input:radio").on("change", function() {
$("form").hide();
$("#" + $(this).attr("data-form") ).show();
});
Разметка html должна выглядеть так:
<input type="radio" data-form="working" value="working" name="condition">
<input type="radio" data-form="workingdamaged" value="workingdamaged" name="condition">
<input type="radio" data-form="notworking" value="notworking" name="condition">
<form id="working">
<h2>working form</h2>
</form>
<form id="workingdamaged">
<h2>workingdamaged form</h2>
</form>
<form id="notworking">
<h2>notworking form</h2>
</form>
<input type="radio" name="condition" class="selectradio" value="working" selection="select1">
<input type="radio" name="condition" class="selectradio" value="workingdamaged" selection="select2">
<input type="radio" name="condition" class="selectradio" value="notworking" selection="select3">
дать им разные идентификаторы
создайте такую модель.
<div class=content>
<div class="subcontent" style="display:none" id="select1">//content</div>
<div class="subcontent" style="display:none" id="select2">//content</div>
<div class="subcontent" style="display:none" id="select3">//content</div>
</div>
<script>
$(function(){
$('.selectradio').change(
function(){
var sourced=$(this).attr("selection") ;
$(".subcontent").hide();
$("#"+sourced).show();
}
);
});
</script>
вы должны включить библиотеку jquery.
Вы можете взглянуть на этот вопрос. Это может служить вашей цели.
Ваше решение в порядке, и я не вижу серьезных проблем с ним.
Вы также можете добавить все формы в DOM и переключить их видимость.
Например:
<form id="form-working" style="display: none"></form>
<form id="form-workingdamaged" style="display: none"></form>
<form id="form-notworking" style="display: none"></form>
<input type="radio" name="condition" value="working" id="condition-working">
<input type="radio" name="condition" value="workingdamaged" id="condition-workingdamaged">
<input type="radio" name="condition" value="notworking" id="condition-notworking">
<script>
var forms = ['working', 'workingdamaged', 'notworking'];
function switch(form) {
for (var k in forms) {
forms[k].style.display = 'none';
}
document.getElementById('form-' + name).style.display = 'block';
}
var elements = document.getElementsByName('condition');
for (var k in elements) {
elements[k].onclick = function() {
if (this.cheked) {
switch(this.getAttribute('value'));
}
}
}
</script>
EDIT: вам нужно изменить идентификаторы элементов. Идентификатор должен быть уникальным
Также вы можете рассмотреть возможность использования или внешних библиотек для шаблонов.