javascript - 在 html "onclick"事件中组合许多类似的操作

Question

我需要在页面中创建一个按钮来切换某些表行的可见性。它已经运行良好，但是“a”标签内的“onclick”事件充满了很多冗余信息，我想让它更干净。我正在使用的代码(并且运行良好)如下所示:

<script type="text/javascript">
    function toggle_visibleid(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'none')
          e.style.display = 'table-row';
       else
          e.style.display = 'none';
    }
</script>

<a href="#" onclick=
 "toggle_visibleid('cena1');
  toggle_visibleid('cena2');
  toggle_visibleid('cena3');
  toggle_visibleid('cena4');
  toggle_visibleid('cena5');
  toggle_visibleid('cena6');
  toggle_visibleid('cena7');
  toggle_visibleid('cena8');
  toggle_visibleid('cena9');
  toggle_visibleid('cena14');
  toggle_visibleid('cena15');
  toggle_visibleid('cena16');
  toggle_visibleid('cena17');
  toggle_visibleid('cena18');
  toggle_visibleid('cena19');
  toggle_visibleid('cena20');
  toggle_visibleid('cena21');
  toggle_visibleid('cena22');
  toggle_visibleid('cena23');">Gravações</a>

有办法让它变小吗？喜欢:

<a href="#" onclick="toggle_visibleid('cena1' 'cena2' 'cena3' 'cena4' 'cena5' 'cena6' 'cena7' 'cena8' 'cena9' 'cena14' 'cena15' 'cena16' 'cena17' 'cena18' 'cena19' 'cena20' 'cena21' 'cena22' 'cena23');">Gravações</a>

谢谢!

Answer 1

我建议

• 使用“真实”事件监听器
• 设置一个循环或其他任何东西来缩短你的模式

var link = document.getElementById("link"); // get your <a> tag somehow
link.addEventListener("click", function () {
  var prefix = "cena";

  // loop 1-9 and 14-23
  for (var i=1; i<=9; i++) {
    toggle_visibleid(prefix + i);
  }

  for (var i=14; i<=23; i++) {
    toggle_visibleid(prefix + i);
  }
});

如果您的 cena ID 代表元素 ID，我建议使用类，例如:

<tag id="cena1" class="myCena">
<tag id="cena2" class="myCena">
...

这将允许更清晰的代码:

link.addEventListener("click", function () {
  var cenaElements = document.querySelectorAll(".myCena");
  for (var i=0, len=cenaElements.length; i<len; i++) {
    toogle_visible(cenaElements.get(i));
  }
});

请注意，您必须重写 toggle_visible(id) 函数。