Не меняется контент при переключении табсов
Использую радиобаттоны как табсы. При клике на следующую кнопку, должен менятся контент на странице, но этого не происходит. При переключении статично висит контент от первого табса.
var tabsContent = [
'<div class="row form-group"> <div class="col-12"> <label for="FIO" class="w-100">Укажите вашу фамилию имя отчество:* </label> <input type="text" class="form-control" placeholder="Иванов Иван Иванович" id="FIO"> </div> </div> <div class="row "> <div class="form-group col-md-6"> <label for="regionIndividual">Ваш регион:*</label> <select class="form-control" id="regionIndividual"> <option selected>Выберите регион</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="col-md-6"> <div class="form-group"> <label for="inputBirthDay">Дата рождения:*</label> <input type="date" placeholder="12.12.1992" class="form-control" id="inputBirthDay"> </div> </div> </div>',
' <div class="row form-group"> <div class="col-12"> <label for="businessName" class="w-100">Наименование предприятия:* </label> <input type="text" class="form-control" placeholder="" id="businessName"> </div> </div> <div class="row "> <div class="form-group col-md-6"> <label for="regionEnterprises">Ваш регион:*</label> <select class="form-control" id="regionEnterprises"> <option selected>Выберите регион</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="col-md-6"> <div class="form-group"> <label for="addressEnterprises">Адрес предприятия:</label> <input type="text" placeholder="" class="form-control" id="addressEnterprises"> </div> </div> </div>',
'<div className="row form-group"> <div className="col-12"> <label htmlFor="enforcementNumber" className="w-100">Номер исполнительного производства:* </label> <input type="text" className="form-control" placeholder="" id="enforcementNumber"> </div> </div>',
' <div class="row form-group "> <div class="col-md-6"> <label for="numberExecutiveDocument" class=""> Номер испол. документа </label><input type="text" class="form-control" placeholder="" id="numberExecutiveDocument"></div><div class="form-group col-md-6"><label for="typeExecutiveDocument">Тип исполнительного документа</label><select class="form-control" id="typeExecutiveDocument"><option selected>Выберите тип</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div></div><div class="row "><div class="form-group col-md-6"><label for="regionNumberID">Ваш регион:*</label><select class="form-control" id="regionNumberID"><option selected>Выберите регион</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div><div class="col-md-6"><div class="form-group"><label for="executiveDocument">Кто выдал испол. документ (орган)</label><input type="text" placeholder="" class="form-control" id="executiveDocument"></div></div></div>'
];
$('.tabs div div input[type=radio]').change(function() {
var index = $(this).index();
$(this).parents('.tabs').find('.tabs__content').html(tabsContent[index]);
});
$(document).ready(function() {
$('.tabs div div input[type=radio]:checked').trigger('change');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" class="tabs" method="post">
<div class="row wrapperRadioHome tabs__head">
<div class="col-sm-3 col-6 ">
<input type="radio" checked name="tabs" id="individual">
<label for="individual">
Физ. лицо
</label>
</div>
<div class="col-sm-3 col-6 ">
<input type="radio" id="entity" name="tabs">
<label for="entity">
Юр. лицо
</label>
</div>
<div class="col-sm-3 col-6 ">
<input type="radio" id="ipNumber" name="tabs">
<label for="ipNumber">
Номер ИП
</label>
</div>
<div class="col-sm-3 col-6 ">
<input type="radio" id="idNumber" name="tabs">
<label for="idNumber">
Номер ИД
</label>
</div>
</div>
<!-- *****************CHANGE**************** -->
<div class="tabs__content">
</div>
</form>
Ответы (1 шт):
Автор решения: Ruslan Semenov
→ Ссылка
Не там определяете индекс, он один в диве.
var tabsContent = [
'<div class="row form-group"> <div class="col-12"> <label for="FIO" class="w-100">Укажите вашу фамилию имя отчество:* </label> <input type="text" class="form-control" placeholder="Иванов Иван Иванович" id="FIO"> </div> </div> <div class="row "> <div class="form-group col-md-6"> <label for="regionIndividual">Ваш регион:*</label> <select class="form-control" id="regionIndividual"> <option selected>Выберите регион</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="col-md-6"> <div class="form-group"> <label for="inputBirthDay">Дата рождения:*</label> <input type="date" placeholder="12.12.1992" class="form-control" id="inputBirthDay"> </div> </div> </div>',
' <div class="row form-group"> <div class="col-12"> <label for="businessName" class="w-100">Наименование предприятия:* </label> <input type="text" class="form-control" placeholder="" id="businessName"> </div> </div> <div class="row "> <div class="form-group col-md-6"> <label for="regionEnterprises">Ваш регион:*</label> <select class="form-control" id="regionEnterprises"> <option selected>Выберите регион</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="col-md-6"> <div class="form-group"> <label for="addressEnterprises">Адрес предприятия:</label> <input type="text" placeholder="" class="form-control" id="addressEnterprises"> </div> </div> </div>',
'<div className="row form-group"> <div className="col-12"> <label htmlFor="enforcementNumber" className="w-100">Номер исполнительного производства:* </label> <input type="text" className="form-control" placeholder="" id="enforcementNumber"> </div> </div>',
' <div class="row form-group "> <div class="col-md-6"> <label for="numberExecutiveDocument" class=""> Номер испол. документа </label><input type="text" class="form-control" placeholder="" id="numberExecutiveDocument"></div><div class="form-group col-md-6"><label for="typeExecutiveDocument">Тип исполнительного документа</label><select class="form-control" id="typeExecutiveDocument"><option selected>Выберите тип</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div></div><div class="row "><div class="form-group col-md-6"><label for="regionNumberID">Ваш регион:*</label><select class="form-control" id="regionNumberID"><option selected>Выберите регион</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div><div class="col-md-6"><div class="form-group"><label for="executiveDocument">Кто выдал испол. документ (орган)</label><input type="text" placeholder="" class="form-control" id="executiveDocument"></div></div></div>'
];
$('.tabs div div input[type=radio]').change(function() {
var index = $(this).parent().index();
//console.log($(this).parent().index());
$(this).parents('.tabs').find('.tabs__content').html(tabsContent[index]);
});
$(document).ready(function() {
$('.tabs div div input[type=radio]:checked').trigger('change');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" class="tabs" method="post">
<div class="row wrapperRadioHome tabs__head">
<div class="col-sm-3 col-6 ">
<input type="radio" checked name="tabs" id="individual">
<label for="individual">
Физ. лицо
</label>
</div>
<div class="col-sm-3 col-6 ">
<input type="radio" id="entity" name="tabs">
<label for="entity">
Юр. лицо
</label>
</div>
<div class="col-sm-3 col-6 ">
<input type="radio" id="ipNumber" name="tabs">
<label for="ipNumber">
Номер ИП
</label>
</div>
<div class="col-sm-3 col-6 ">
<input type="radio" id="idNumber" name="tabs">
<label for="idNumber">
Номер ИД
</label>
</div>
</div>
<!-- *****************CHANGE**************** -->
<div class="tabs__content">
</div>
</form>