1

これを使用して、いくつかの div を表示/非表示にしています。最後に、div を 1 つずつ表示するボタンがあります。

HTML をあまりいじることなく、一度にすべてを表示/非表示にする 2 番目のボタンを作成するにはどうすればよいですか?

基本的に、各 div には入力フィールドが含まれているため、ユーザーは [もう 1 つ追加] ボタンをクリックして追加のフィールドを取得します。デフォルトでは、すべてのフィールドが非表示になっているため、一度にすべてを表示するにはボタンが必要です (表示/非表示にする 14 の div があります)。

どんな助けでも大歓迎です。

Javascript

var counter = 0;
var numBoxes = 3;
function toggle4(showHideDiv) {
       var ele = document.getElementById(showHideDiv + counter);
       if(ele.style.display == "block") {
              ele.style.display = "none";
       }
       else {
              ele.style.display = "block";
       }
       if(counter == numBoxes) {
                document.getElementById("toggleButton").style.display = "none";
       }
}

HTML

<table>
   <tr>
      <td style="width: 150px;">
         <div id="box1" style="display: none;">First</div>
      </td>
      <td style="width: 150px;">
         <div id="box2" style="display: none;">Second</div
      </td>
      <td style="width: 150px;">
         <div id="box3" style="display: none;">Third</div
      </td>
   </tr>
</table>
<input id="toggleButton" type="button" value="Add one more!" onclick="counter++; toggle4('box');">
4

3 に答える 3

1

基本的な機能は次のとおりですが、多少の改良が必要です。

var d = document,
    table = d.getElementsByTagName('table')[0],
    divs = table.getElementsByTagName('div'),
    toggle = d.getElementById('toggleButton'),
    allToggle = d.getElementById('allToggle'),
    count = 0;

function toggles(){    
    var elem = divs[count];
    elem.style.display = 'block';

    count++;
}

toggle.onclick = function(){
    toggles();
};

allToggle.onclick = function(){
    if (allToggle.getAttribute('data-show') == 1){
        for(var i=0,len=divs.length;i<len;i++){
            divs[i].style.display = 'none';
            allToggle.setAttribute('data-show',0);
            allToggle.value = 'Show all';
        }
    }
    else {
        for(var i=0,len=divs.length;i<len;i++){
            divs[i].style.display = 'block';
            allToggle.setAttribute('data-show',1);
            allToggle.value = 'Hide all';
        }
    }
}
​

JSフィドルデモ。

上記は次のHTMLに基づいています。

<table>
   <tr>
      <td style="width: 150px;">
         <div id="box1" style="display: none;">First</div>
      </td>
      <td style="width: 150px;">
         <div id="box2" style="display: none;">Second</div>
      </td>
      <td style="width: 150px;">
         <div id="box3" style="display: none;">Third</div>
      </td>
   </tr>
</table>
<input id="toggleButton" type="button" value="Add one more!" />
<input id="allToggle" type="button" value="Show all" />​
于 2012-04-18T23:53:39.493 に答える
0

クラスごとにすべてのdivを選択し（追加する必要があります）、それらを非表示/表示する機能を備えたボタンがあります。ボタンが 1 つだけ必要な場合は、状態を覚えておく必要があります。以下の例では、グローバルを使用しています。

<button id="showhideall">

$(document).ready(function(){

var allshowing = true;

$("#showhideall").click(function(){
    alert(allshowing);
    if(allshowing){
        $(".foo").hide();
        allshowing=false;            
    } else {
        $(".foo").show();
    }
});
}​);​
于 2012-04-18T23:40:27.673 に答える
-1 
var counter = 0;
var numBoxes = 3;
function toggle4(showHideDiv) {
       var ele = document.getElementById(showHideDiv + counter);
       if(ele.style.display == "block") {
              ele.style.display = "none";
       }
       else {
              ele.style.display = "block";
       }
       if(counter == numBoxes) {
                document.getElementById("toggleButton").style.display = "none";
       }
}

function toggle3(contentDiv) {
        if (contentDiv.constructor == Array) {
                for(i=0; i < contentDiv.length; i++) {
                     toggle2(contentDiv[i]);
                }
        }
        else {
               toggle2(contentDiv);
        }
}

function toggle2(showHideDiv) {
    var ele = document.getElementById(showHideDiv);

    if(ele.style.display == "block") {
            ele.style.display = "none";

      }
    else {
        ele.style.display = "block";

    }
}

<input id="toggleButton" type="button" value="Show me the money!" onclick="counter++; toggle4('box');">

<input type="button" value="Press me to toggle all 3 DIVs" onClick="toggle3(['box1', 'box2', 'box3']);">
于 2012-04-19T09:57:12.310 に答える