У меня вопрос javascript индекс переключения

Question

При использовании функции переключения в всплывающем окне у меня возникает вопрос о событии переключения. Событие переключения происходит с заголовком таблицы + @ index.

Когда я щелкаю заголовок таблицы, отображаются только строки значений tablebody + @ index. При создании события без значения @index значение id дублируется, поэтому вся строка не отображается. Помогите javascript, jquery экспертам!

<!-- popup -->
<script id="reqList-template" type="text/x-handlebars-template">
{{#resultList}}
	<div class="BarType header" id="tableheader{{@index}}">
		<a class="close" id="togglebtn{{@index}}" 
                        href="javascript:toggle_pop({{@index}})"></a>
			<span>{{name}}</span>
	</div>
	{{#each rsToAdd}}
		<div class="BarType body" id="tablebody{{@index}}">
			<table class="def_inTB fl" >
				<tbody>
				<tr>
				<input class="checkbox" type="checkbox" value="{{id}}">
							{{name}}
				</tr>
			</tbody>
			</table>
		</div>
	{{/each}}
{{/resultList}}
</script>

<!-- parent -->
function toggle_pop(index){
	$("#tablebody" +index).slideToggle();
	if ( $("#togglebtn"+index).hasClass('open') ){
		$("#togglebtn"+index).addClass('close');
		$("#togglebtn"+index).removeClass('open');
	}else{
		$("#togglebtn"+index).addClass('open');
		$("#togglebtn"+index).removeClass('close');
	}
			
   	}

Answer 1

У вас должен быть общий класс для всех tablebody в tableheader. И вы можете использовать {{@../index}} для доступа к родительскому индексу, чтобы структура элемента была похожа на

<div class="BarType header tableheader0"></div>
        <div class="BarType body tablebody0"></div>
        <div class="BarType body tablebody0"></div>
<div class="BarType header tableheader1"></div>
        <div class="BarType body tablebody1"></div>
        <div class="BarType body tablebody1"></div>

Использование родительского индекса для создания класса, как показано ниже

<div class="BarType body tablebody{{@../index}}">

А затем использовать имя класса в качестве селектора

function toggle_pop(index){
    $(".tablebody" +index).slideToggle();
}

Answer 2

В HTML идентификаторы документов должны быть уникальными. Вот почему всегда избегайте дублирования идентификаторов. Используйте class вместо него.

Ваш скрипт может выглядеть следующим образом:

<script id="reqList-template" type="text/x-handlebars-template">
{{#resultList}}
    <div class="BarType header tableheader{{@index}}">
        <a class="close" href="#" onclick="toggle_pop({{@index}})">
            <span>{{name}}</span>
        </a>
    </div>
    {{#each rsToAdd}}
        <div class="BarType body tablebody{{@index}}">
            <table class="def_inTB fl" >
                <tbody>
                <tr>
                <input class="checkbox" type="checkbox" value="{{id}}">
                            {{name}}
                </tr>
            </tbody>
            </table>
        </div>
    {{/each}}
{{/resultList}}
</script>

JS:

function toggle_pop(index){ 
     $(".tablebody" +index).slideToggle(); 
}

Попробуйте поймать @index из #resultList и поместите его в каждый tablebody из rsToAdd, я имею в виду, чтобы он выглядел как для каждого BarType body:

<div class="BarType header tableheader0">  <-- index = 0
...
</div>
<div class="BarType body tablebody0">     <-- here the same 0, etc for 1, 2, others
...
</div>
<div class="BarType body tablebody0">     <-- here the same 0, etc for 1, 2, others
...
</div>

Вот фрагмент кода, показывающий, каким он должен быть:

 
function toggle_pop(index){ 
	 $(".tablebody" +index).slideToggle(); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="BarType header tableheader0">
<a class="close" href="#" onclick="toggle_pop(0)"> 
	 <span>qqqqqqq</span>
</a>
</div> 
<div class="BarType body tablebody0">
 <table class="def_inTB fl" >
		 <tbody>
				<tr>
				<input class="checkbox" type="checkbox" value="0">
							qqqqqq
				</tr>
		 </tbody>
 </table>
</div>
    
<div class="BarType body tablebody0">
 <table class="def_inTB fl" >
		 <tbody>
				<tr>
				<input class="checkbox" type="checkbox" value="1">
							qqq222
				</tr>
		 </tbody>
 </table>
</div>
    
<div class="BarType header tableheader1">
<a class="close" href="#" onclick="toggle_pop(1)"> 
	 <span>qqqqqqq</span>
</a>
</div> 
<div class="BarType body tablebody1">
 <table class="def_inTB fl" >
		 <tbody>
				<tr>
				<input class="checkbox" type="checkbox" value="0">
							qqqqqq
				</tr>
		 </tbody>
 </table>
		</div>
<div class="BarType body tablebody1">
 <table class="def_inTB fl" >
		 <tbody>
				<tr>
				<input class="checkbox" type="checkbox" value="1">
							qqq222
				</tr>
	      </tbody>
 </table>
</div>