配列からIdを取得して切り替えます

Question

"auto toggle"を作成しようとしています。私の計画はそれをループでやることでした。 array[i].onclickはこれまでのところ動作しますが、私はトグルアニメーションをさらに進めることはできません。

function setContentBox() { 
    for (var i = 0; i < jArrayText.length; i++) 
    document.getElementById(textWord[i]).onclick = function() { 
     var x = document.getElementById(textWord[i] + "commentB"); 
     if (x.style.display === 'none') { 
     x.style.display = 'block'; 
     } else { 
     x.style.display = 'none'; 
     } 
    }; 
} 

$(document).ready(function(){ 
    setContentBox(); 
}); 

<div class="translaterBox"> 
    <span ng-repeat="text in textWords track by $index" id="{{text}}" class="container"> 
    {{text + " "}} 
    <div id="{{text + 'commentB'}}" class="comment-box"> 
     <h4 class="title">{{text}}</h4> 
     <div class="form-group"> 
     <textarea class="form-control" id="exampleTextarea" rows="3"></textarea> 
     </div> 
    </div> 
    </span> 
</div> 

Answer 1

ここにあなたのロジックは、それが必要以上にたくさんより複雑です。既にjQueryを使用しているので、繰り返し要素のクラスを使用してそれらを識別し、クリックハンドラ内のDOMトラバーサルを使用して関連要素を見つけて修正できます。これを試してみてください：

<div class="translaterBox"> 
    <span ng-repeat="text in textWords track by $index" id="{{text}}" class="container"> 
    {{text + " "}} 
    <div id="{{text + 'commentB'}}" class="comment-box"> 
     <h4 class="title">{{text}}</h4> 
     <div class="form-group"> 
     <textarea class="form-control" id="exampleTextarea" rows="3"></textarea> 
     </div> 
    </div> 
    </span> 
</div> 

$(document).ready(function() { 
    $('.container').click(function() { 
    $(this).find('.comment-box').toggle(); 
    }); 
});