javascript - 我有一个关于 javascript 切换索引的问题

Question

在弹出窗口中使用切换功能的事件时，我有一个关于切换事件的问题。切换事件通过 tableheader + @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

在 HTML 文档中，ID 必须是唯一的。这就是为什么要始终避免 ID 重复的原因。使用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(); 
}

尝试从#resultList捕获@index并将其放置在rsToAdd的每个tablebody中，我的意思是使其看起来像每个 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>