0

私はグーグルとここでこれを検索しようとしましたが、私が抱えている問題のようなものは出てこないので、これは重複したトピックではないとかなり確信しています。

JavaScriptを使用して2つを非表示にして1つを表示しようとしている3つのdivがあります。これまで何度もやったことがあるので、複雑になることはないはずですが、それは私を狂わせています。

以下は私のdivレイアウトです：

<div id="top_scorer">
   <span id="top_scores_menu">
      <a onclick='getTopPlayer("top_mens")'>Men's</a>
      <a onclick='getTopPlayer("top_womens_2nd")'>Women's 1st</a>
      <a onclick='getTopPlayer("top_womens_1st")'>Women's 2nd</a>
   </span>

   <div id="top_mens" class="topPlayer">
      <? echo $mens_top_scorers; ?>
   </div>
   <div id="top_womens_1st" class="topPlayer" style="display: none ;">
      <? echo $womens_1st_top_scorer; ?>
   </div>
   <div id="top_womens_2nd" class="topPlayer" style="display: none ;">
      <? echo $womens_2nd_top_scorer; ?>
   </div>
</div>

そして、これは私が使おうとしている単純なJavaScriptです。

function getTopPlayer(WhoToShow){
    //alert(WhoToShow);
    document.getElementsByTagName('topPlayer').style.display='none';
    document.getElementById(WhoToShow).style.display='inline';

}

奇妙なことに、アラートを除いて関数内のすべてをコメントアウトすると、常に期待どおりに機能し document.getElementById(WhoToShow).style.display='inline'ます。1回だけ機能し、リンクはクリックできなくなります。document.getElementById(WhoToShow).style.display='inline';コメントを外したままにすると、期待どおりに機能します。まったく機能しません。

今、私はこれを多くの異なる方法で試しました。元々、私は次のものを使おうとしていました。

function getTopPlayer(WhoToShow, hide1, hide2){
    document.getElementById(hide1).style.display="none";
    document.getElementById(hide2).style.display="none";
    document.getElementById(WhoToShow).style.display="inline";
}

これは最初のクリックで完全に機能し、それ以降のクリックで注意が必要です。私が考えることができる他の唯一のことは、効果があるかもしれないということです。私が愚かな何かの嘲笑を見落としていない限り、phpコードは公開されたグーグルドキュメントグラフiframeを単にエコーアウトします。

これは、phpによってエコーされたgoogledociframeスクリプトの例です。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js">
{
    "dataSourceUrl": "//docs.google.com/spreadsheet/tq?key=0AmOgECNc58wCdFJzUVkyMmJ1dTBqXzVuQmxlc3F0UkE&transpose=1&headers=1&range=A1%3AB100&gid=1&pub=1",
    "options": {
        "vAxes": {
            "1": {
                "useFormatFromData": true
            },
            "0": {
                "useFormatFromData": true
            }
        },
        "title": "Womens 2nd Team",
        "booleanRole": "certainty",
        "animation": {
            "duration": 0
        },
        "hAxis": {
            "title": "Number of Goals",
            "useFormatFromData": true,
            "viewWindowMode": "pretty",
            "viewWindow": {}
        },
        "isStacked": false,
        "width": 600,
        "height": 371
    },
    "state": {},
    "chartType": "BarChart",
    "chartName": "Chart 3"
}

ラップトップで欲求不満を解消する準備ができているので、誰かが提供できるヘルプやアドバイスを本当にいただければ幸いです。

解決済み（ちょっと）

そのため、問題の原因をGoogleが生成したスクリプトまで突き止めることができ、インタラクティブチャートスクリプトをイメージチャートに置き換えました。これは期待どおりに機能しますが、残念ながらインタラクティブチャートでは機能しませんでした。

4

3 に答える 3

2

更新された回答！divの名前を番号に変更してから、ループを使用してdivを循環し、選択したものだけを表示します。

例： http： //jsfiddle.net/howderek/Ysaer/

于 2012-09-10T21:26:56.307 に答える
2

getElementsByTagNameの代わりに使用しましたgetElementsByClassName。そして、ループする必要のある要素の配列を返します。

HTML

<div id="top_scorer">
   <span id="top_scores_menu">
      <a href="#" onclick='getTopPlayer("top_mens");return false;'>Men's</a>
      <a href="#" onclick='getTopPlayer("top_womens_1st");return false;'>Women's 1st</a>
      <a href="#" onclick='getTopPlayer("top_womens_2nd");return false;'>Women's 2nd</a>
   </span>

   <div id="top_mens" class="topPlayer">
      mens top
   </div>
   <div id="top_womens_1st" class="topPlayer" style="display: none ;">
      womens 1st
   </div>
   <div id="top_womens_2nd" class="topPlayer" style="display: none ;">
     womens 2nd
   </div>
</div>​

Javascript

var getTopPlayer = function(WhoToShow){
    var tp = document.getElementsByClassName('topPlayer');
    for(var i = 0; i < tp.length; i++){
        tp[i].style.display='none'
    }
    document.getElementById(WhoToShow).style.display='block';
}​

アップデート

私が行った同様の回答で、getElementsByClassNameがIE <9で機能しないという情報を入手したので、この回答にも役立つ可能性のあるコードをその回答に追加しました。

https://stackoverflow.com/a/12386152/600101を参照してください

于 2012-09-10T21:29:51.127 に答える
0 
document.getElementsByTagName('topPlayer').style.display='none';

これは...何もしません。topPlayer「TagName」ではありませんか？

于 2012-09-10T21:30:30.833 に答える