我有一个问题 javascript 切换索引

Question

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

Answer 2

您应该为 tableheader 下的所有 tablebody 设置一个公共 class。您可以使用 {{@../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>

使用父级索引创建 class 如下

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

然后使用 class 名称作为选择器，

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

我有一个问题 javascript 切换索引

I have a question javascript toggle index

javascript

jquery

toggle

handlebars.js