在 html “onclick” 事件中组合许多类似的操作

Combining lots of similar actions in a html "onclick" event

本文关键字：许多类 组合 操作 事件 html onclick      更新时间：2023-09-26

我需要在页面中创建一个按钮来切换某些表格行的可见性。它已经运行良好，但是"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>

谢谢！

我建议

  • 使用"真实"事件侦听器
  • 设置循环或其他任何东西以缩短您的模式

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，我建议使用 intead 类，例如：

<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)函数。

function toggle_multiple_visible() {
    for (var i = 0; i < arguments.length; i++) {
        toggle_visibleid(arguments[i]);
    }
}

然后使用：

onclick="toggle_multiple_visible('cena1', 'cena2', ...);"

定义一个函数

function customToggleVisibleId(list) {
     for(var i=0; i<list.length; i++) {
          toggle_visibleid(list[i]);
     }
}

然后你可以 

<a href="#" onclick="customToggleVisibleId(['cena1' 'cena2' 'cena3'])">

编辑：为了获得最佳性能：

function customToggleVisibleId() {
     var i=arguments.length;
     while(i--) {
          toggle_visibleid(arguments[i]);
     }
}
创建一个

函数，该函数采用一个 id 数组，然后遍历每次调用现有 toggle_visibledid 函数的 id。

<a href="#" onclick="toggleVisibleIds(['cena1', 'cena2', 'cena3', 'cena4', 'cena5', 'cena6', 'cena7', 'cena8', 'cena9', 'cena14', 'cena15', 'cena16', 'cena17', 'cena18','cena19', 'cena20','cena21','cena22','cena23']);">Gravações</a> 
   function toggleVisibleIds(ids){
        for(var i = 0, id; id = ids[i++];){
            toggle_visibleid(id);
        }
    }

你应该考虑使用 jQuery 来匹配cena**元素。为此，您可能需要重新考虑如何识别它们。也许使用应用于所有这些元素的类？

然后，您可以使用 jQuery each 函数对每个匹配元素调用一些操作。

将要切换的元素存储在数组中，然后使用函数遍历数组以隐藏它们。 如果这些"cena"元素的命名有一些标准模式，则可以简化。

<head>
<script type="text/javascript">
var cenaArray = ['cena1', 'cena2', 'cena3', 'cena4', 'cena5', 'cena6', 'cena7', 'cena8', 'cena9', 'cena14', 'cena15', 'cena16', 'cena17', 'cena18', 'cena19', 'cena20', 'cena21', 'cena22', 'cena23'];
function toggleAll() {
  for(var i=0; i<cenaArray.length; i++)
  {
      toggle_visibleid( cenaArray[i] );
  }
}
</script>
</head>
<body>
<a href="#" onclick="toggleAll()">Gravações</a>
</body>

HTML 

<a href="#" onclick="toggleCena()">Gravações</a>

脚本

function toggleCena(){
    for(i=1; i<24; i++){
        tempid="cena"+i;
        toggle_visibleid(tempid);
    }
}

我不知道toggle_visibleid做什么，但试试这个

相关文章：