0

特定のDIVでCSS表示を変更するための次の機能があります

function(){

    if(document.getElementById('kitstory').style.display === "none")
        {
            document.getElementById('kitstory').style.display = "block";
        } else{
            document.getElementById('kitstory').style.display = "none";
        }
    }

リンクで onclick を使用して、必要に応じて関数を呼び出しています。

これは ID "kitstory" の DIV で正常に動作しますが、この関数を複数の DIV に使用する方法はありますか (1 ページに複数の記事を配置し、関数を有効にしたい DIV が異なる場合があります)。IDを空白のままにしてみましたが、実行されません。

4

6 に答える 6

1

しかし、もちろん！例えば：

function toggleSingle(elementId) {
  var el = document.getElementById(elementId);
  if (el.style.display === 'none') {
    el.style.display = 'block';
  }
  else {
    el.style.display = 'none';
  }
}

この関数は、コレクションで動作する別の関数で使用できます。

function toggleMultiple(elementIds) {
  if (! (elementIds && elementIds[0]) ) {
    // elementIds is not an array, should exit (and warn the developer as well perhaps)
    return;
  }
  for (var i = 0, l = elementIds.length; i < l; ++i) {
    toggleSingle(elementIds[i]);
  }
}

これを 1 つではなく 2 つの関数として記述したのはなぜですか? この場合、それはおそらくやり過ぎですが、一般的に、「個々の」アイテム処理を別の関数に分けることがよくあります。これにより、コードが読みやすくなり、テストがよりシンプルになります。それでも、次のようなもので全能関数を書くことができます:

function toggleSmart() {
  for (var i = 0, l = arguments.length; i < l; ++i) {
    var el = document.getElementById(arguments[i]);
    if (el.style.display === 'none') {
      el.style.display = 'block';
    }
    else {
      el.style.display = 'none';
    }
    // and another way to do it: more concise, but less readable for some:
    // var display = el.style.display;
    // display = display === 'none' 
    //        ? 'block' 
    //        : 'none';
  }
}
于 2012-08-21T10:34:47.010 に答える
1

これを達成する方法はいくつかあります。私が考えることができる最も簡単な方法は、 getElementsByTagNameorgetElementsByClassNameを使用してリストを反復処理するか、 jQueryのようなフレームワークを使用することです

于 2012-08-21T10:35:01.660 に答える
0

次のいずれかを使用できます。

document.getElementsByClassName('some-class');

document.getElementsByTagName('div');

例えば：

var elements = document.getElementsByClassName('kitstory');
for(var i = 0, l = elements.length; i < l; i++) {
    elements[i].style.display = (elements[i].style.display == 'none') ? 'block' : 'none';
}

クラス名またはタグ名が目的の要素をターゲットにするのにすぐに役立たない場合は、別のdocumentものに変更することもできます。

var elements = document.getElementById('my-container').getElementsByTagName('div');
于 2012-08-21T10:35:16.147 に答える
0

これを試して：

function yourAction() {
    if(this.style.display === "none") {
        ...
    }
}

var i, len;
for(i = 0, len = document.getElementsByTagName("div"); i < len; i++) {
    document.getElementsByTagName("div")[i].onclick = yourAction;
}
于 2012-08-21T10:35:18.160 に答える
0

これを試して 

function change(id){

if(document.getElementById(id).style.display === "none")
    {
        document.getElementById(id).style.display = "block";
    } else{
        document.getElementById(id).style.display = "none";
    }
}

次に、関数を change(divID); で呼び出します。

于 2012-08-21T10:36:21.077 に答える
0

名前付き関数を作成し、id をパラメーターとして関数に送信します。

function Toggle(id){
  var element = document.getElementById(id);
  if (element.style.display === "none") {
    element.style.display = "block";
  } else{
    element.style.display = "none";
  }
}

使用法：

Toggle('kitstory');
于 2012-08-21T10:36:21.250 に答える