0

ここにいくつかのテーブルがあり、以下のこのjavascriptを使用して、ユーザーがボタンをクリックするたびにそれらを非表示および表示にしました。このスクリプトに追加したいのは、誰かがテーブルのボタンをクリックして表示し、他のすべてを非表示にすることです。どうすればこれを行うことができますか？前もって感謝します！

これは私のhtmlコードです：

<table id="SC1_TH_" class="header_op"><tr><td>
<div id="SC1_BSH_" onClick="SC[1]();" class="hide_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC1_BO_" style="display:dlock;">BLAH BLAH</div>

<table id="SC2_TH_" class="header_cl"><tr><td>
<div id="SC2_BSH_" onClick="SC[2]();" class="show_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC2_BO_" style="display:none;">BLAH BLAH</div>

<table id="SC3_TH_" class="header_cl"><tr><td>
<div id="SC3_BSH_" onClick="SC[3]();" class="show_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC3_BO_" style="display:none;">BLAH BLAH</div>

これは私のJavaScriptです：

<script type="text/javascript">

var SC = [];

for (var i = 1; i < 10; i++) {

SC[i] = (function(i){

return function(){

var SC_TH  = document.getElementById('SC'+i+'_TH_');
var SC_BSH = document.getElementById('SC'+i+'_BSH_');    
var SC_BO  = document.getElementById('SC'+i+'_BO_');

  if (SC_BO.style.display == 'block' || SC_BO.style.display == ''){
      SC_TH.className      = 'header_cl';
      SC_BSH.className     = 'show_button';
      SC_BO.style.display  = 'none';}
else {SC_TH.className      = 'header_op';
      SC_BSH.className     = 'hide_button';
      SC_BO.style.display  = 'block';}
     }})(i);}       
</script>

編集：言い換えれば、今クリックしているこのボタンが他のすべての隠されているものである場合、私は何か言う必要があります!!!

4

3 に答える 3

1

これは、いくつかの非常に単純なjQuery（推奨）コードを使用した実際の例です。

HTML：

<table><tr><td>
<div class="toggle-button">*</div>OPTION ONE
</td></tr></table>
<div class="toggle">BLAH BLAH</div>

<table><tr><td>
<div class="toggle-button">*</div>OPTION ONE
</td></tr></table>
<div class="toggle">BLAH BLAH</div>

<table><tr><td>
<div class="toggle-button">*</div>OPTION ONE
</td></tr></table>
<div class="toggle">BLAH BLAH</div>

JS：

$(function() {
    $('div.toggle').hide();
    $('.toggle-button').click(function(){
        $('div.toggle').hide();
        $(this).closest('table').next('div.toggle').show();
    });
});

@StephenByrneが述べたように、jQueryAccordianなどの既存のコンポーネントを使用することも強くお勧めします。実装には数分かかり、選択できるテーマが多数付属しており、完全にカスタマイズ可能です。あなたはあなた自身を書くのに何時間も何日も費やすことができます。それが学習演習でない限り、それは単に時間の無駄です。車輪の再発明をする必要はありません。

jsのみに向けた強力な推進力を示したように、これが実用的なjsのみのソリューションです。

HTML：

<table id="SC1_TH_" class="header_op"><tr><td>
<div id="SC1_BSH_" onclick="toggle(this);" class="hide_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC1_BO_" style="display:block;">BLAH BLAH</div>

<table id="SC2_TH_" class="header_cl"><tr><td>
<div id="SC2_BSH_" onclick="toggle(this);" class="show_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC2_BO_" style="display:none;">BLAH BLAH</div>

<table id="SC3_TH_" class="header_cl"><tr><td>
<div id="SC3_BSH_" onclick="toggle(this);" class="show_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC3_BO_" style="display:none;">BLAH BLAH</div>

JS：

function toggle(src) {
    var id =  src.id;
    var index = id.substring(2, 3);

    var i = 1;
    var toggleItem = document.getElementById('SC' + i.toString() + '_BO_');

    while (toggleItem != null) {
        var bShow = index == i;
        var button = document.getElementById('SC' + i.toString() + '_BSH_');
        var table = document.getElementById('SC' + i.toString() + '_TH_');

        if (bShow) {
            toggleItem.style.display = 'block';
            toggleItem.className = 'setitemclassname';
            button.className = 'setbuttonclassname';
            table.className = 'settableclassname';
        }
        else {
            toggleItem.style.display = 'none';
            toggleItem.className = 'setitemclassname';
            button.className = 'setbuttonclassname';
            table.className = 'settableclassname';
        }
        toggleItem = document.getElementById('SC' + (++i).toString() + '_BO_');
    }
}

と評価されwhileたときのループ内で、表示するアイテムがあることがわかります。そこにロジックを追加して、クラス名を変更します。index == itrue

于 2013-01-20T10:58:02.050 に答える
1

それらをすべて非表示にしてから、切り替えて開く必要があるものを表示します。このスクリプトは最も洗練されたソリューションではありませんが、コーディングスタイルに直接統合されています。

for (var i = 1; i < 10; i++) {
    SC[i] = (function(i){
        var SC_TH  = document.getElementById('SC'+i+'_TH_'),
            SC_BSH = document.getElementById('SC'+i+'_BSH_'),
            SC_BO  = document.getElementById('SC'+i+'_BO_');

        return function(action) {
            if (!action) action = SC_BO.style.display=="none" ? "show" : "hide";

            if (action == "show") { 
                for (var i=0; i<SC.length; i++)
                    SC[i]("hide");
                SC_TH.className      = 'header_op';
                SC_BSH.className     = 'hide_button';
                SC_BO.style.display  = '';
            } else {
                SC_TH.className      = 'header_cl';
                SC_BSH.className     = 'show_button';
                SC_BO.style.display  = 'none';
            }
        };
    })(i);
}
于 2013-01-20T11:40:01.243 に答える
1

よりクリーンなソリューションには、HTMLも少し変更する必要があります。これを削除し、JavaScriptが切り替え対象のアイテムを識別できるようにするonclickクラス（）に置き換えます。toggleItemまた、すべてのボタンにクラスが含まれていることを確認して、ボタンをbutton識別できるようにします。

<table id="SC1_TH_" class="header">
  <tr>
    <td>
      <div id="SC1_BSH_" class="button">*</div>OPTION ONE</td>
  </tr>
</table>
<div id="SC1_BO_" class="toggleItem">BLAH BLAH</div>
<table id="SC2_TH_" class="header">
  <tr>
    <td>
      <div id="SC2_BSH_" class="button">*</div>OPTION ONE</td>
  </tr>
</table>
<div id="SC2_BO_" class="toggleItem">BLAH BLAH</div>
<table id="SC3_TH_" class="header">
  <tr>
    <td>
      <div id="SC3_BSH_" class="button">*</div>OPTION ONE</td>
  </tr>
</table>
<div id="SC3_BO_" class="toggleItem">BLAH BLAH</div>

次に、JavaScriptで：

var buttons = document.getElementsByClassName('button'),
  toggleItems = document.getElementsByClassName('toggleItem'),
  tables = document.getElementsByClassName('header');
for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = getFunction(toggle, i);
}
// getFunction is needed for reasons to do with variable scope
function getFunction(f, p) {return function() {f(p)}}
function toggle(selected) {
    for (var i = 0; i < toggleItems.length; i++) {
        toggleItems[i].style.display = i == selected ? '' : 'none';
        tables[i].className = i == selected ? 'header open' : 'header closed';
        buttons[i].className = i == selected ? 'button show' : 'button hide';
    }
}
toggle(0);  // initially show only the first one

（これは、ボタンとトグルアイテムが同じ順序になることを前提としています。そうでない場合は、IDの確認に戻るか、アイテムとボタンを関連付ける他の方法を見つける必要があります。）

（テーブルとボタンのクラスの変更を含むように編集）

于 2013-01-20T12:39:27.197 に答える