Javascript 在html中组合许多类似的操作；onclick"；事件_Javascript_Html_Events_Onclick

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

javascript html events

Javascript 在html中组合许多类似的操作；onclick"；事件,javascript,html,events,onclick,Javascript,Html,Events,Onclick,我需要在页面中创建一个按钮，用于切换某些表行的可见性。它已经很好地工作了，但是“a”标记中的“onclick”事件充满了大量冗余信息，我想让它更干净。我正在使用的代码（运行良好）如下所示： <script type="text/javascript"> function toggle_visibleid(id) { var e = document.getElementById(id); if(e.style.display == 'none')

我需要在页面中创建一个按钮，用于切换某些表行的可见性。它已经很好地工作了，但是“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>


功能切换\u可视id（id）{
var e=document.getElementById（id）；
如果（e.style.display==“无”）
e、 style.display='表行'；
其他的
e、 style.display='none'；
}

有没有办法让它变小？比如：

<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>

谢谢

> P>您应该考虑使用jQuery匹配<代码> CENA**<代码>元素。要实现这一点，您可能需要重新思考如何识别它们。也许使用一个应用于所有这些元素的类

您可以使用jQuery函数调用每个匹配元素的一些动作。

您应该考虑使用jQuery匹配<代码> CENA**<代码>元素。要实现这一点，您可能需要重新思考如何识别它们。也许使用一个应用于所有这些元素的类

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

定义一个函数

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

定义函数

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

我建议

使用“真实”事件侦听器
设置一个循环或者其他什么来缩短你的模式

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);
  }
});

var link=document.getElementById（“link”）；//拿你的标签
link.addEventListener（“单击”），函数（）{
var prefix=“cena”；
//环路1-9和14-23
对于（var i=1；i我建议

使用“真实”事件侦听器
设置一个循环或者其他什么来缩短你的模式



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);
  }
});

var link=document.getElementById（“link”）；//以某种方式获取标记
link.addEventListener（“单击”），函数（）{
var prefix=“cena”；
//环路1-9和14-23
对于（var i=1；i将要切换的元素存储在一个数组中，然后使用函数在数组中循环以隐藏它们。如果这些“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>


变量CENARRAY=['cena1'、'cena2'、'cena3'、'cena4'、'cena5'、'cena6'、'cena7'、'cena8'、'cena9'、'cena14'、'cena15'、'cena16'、'cena17'、'cena18'、'cena19'、'cena20'、'cena21'、'cena22'；
函数toggleAll（）{
对于（var i=0；i将要切换的元素存储在一个数组中，然后使用函数在数组中循环以隐藏它们。如果这些“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>


变量CENARRAY=['cena1'、'cena2'、'cena3'、'cena4'、'cena5'、'cena6'、'cena7'、'cena8'、'cena9'、'cena14'、'cena15'、'cena16'、'cena17'、'cena18'、'cena19'、'cena20'、'cena21'、'cena22'；
函数toggleAll（）{
对于（var i=0；iHTML
<a href="#" onclick="toggleCena()">Gravações</a>



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

function-toggleCena（）{
对于（i=1；iHTML
<a href="#" onclick="toggleCena()">Gravações</a>



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

function-toggleCena（）{
对于（i=1；i创建一个函数，该函数接受一个ID数组，然后每次遍历ID调用现有的toggle\u visibledid函数
<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);
        }
    }


功能切换VisibleIDS（ids）{
for（变量i=0，id；id=ids[i++]；）{
切换可视id（id）；
}
}
创建一个函数，该函数接受一个ID数组，然后每次通过ID迭代调用现有的toggle\u visibledid函数
<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);
        }
    }


功能切换VisibleIDS（ids）{
for（变量i=0，id；id=ids[i++]；）{
切换可视id（id）；
}
}
是否存在“cena”模式是否应该切换？最好总是避免使用内联脚本并从javascript事件处理程序调用这些函数…什么是cena*
-类、id或其他完全相同的东西？是否有许多具有相同行为的
标记？您应该使用CSS类名来执行此操作。忘记单个id。@sergio和@insertusernamehere cena**是一个应用于
标记的id。我有6个
具有类似行为。是否有“cena”模式是否应该切换？最好总是避免使用内联脚本并从javascript事件处理程序调用这些函数…什么是cena*
-类、id或其他完全相同的东西？是否有许多具有相同行为的
标记？您应该使用CSS类名来执行此操作。忘记单个id。@sergio和@insertusernamehere cena**是应用于
标记的id。我有6个
具有类似行为。