0

一部のテーブル行の表示を切り替えるページにボタンを作成する必要があります。すでにうまく動いているのですが、「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>

ありがとう！

4

7 に答える 7

3

私は提案します

  • 「実際の」イベントリスナーを使用する
  • パターンを短くするためにループなどを設定する


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

于 2013-09-24T20:42:48.387 に答える
1 
function toggle_multiple_visible() {
    for (var i = 0; i < arguments.length; i++) {
        toggle_visibleid(arguments[i]);
    }
}

次に使用します。

onclick="toggle_multiple_visible('cena1', 'cena2', ...);"
于 2013-09-24T20:43:27.847 に答える
0

切り替える要素を配列に格納し、関数を使用して配列をループして非表示にします。これらの「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>
于 2013-09-24T20:45:36.900 に答える
0

HTML

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

脚本

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

私は何をするのか分かりtoggle_visibleidませんが、これを試してください

于 2013-09-24T20:46:04.933 に答える