javascript - 从数组中获取 Id 并切换它

Question

我正在尝试构建一个“自动切换”。我的计划是用循环来做。 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();
  });
});