1

別の DIV の特定のテキストに基づいて、多数の DIV を非表示にしようとしています。Javascript (以下) が機能しません。

HTML:

<div id="LEGEND">abAB</div>

<div id="small-a"></div> 
<div id="small-b"></div> 
<div id="big-a"></div> 
<div id="big-b"></div>

LEGEND DIV にテキスト a が含まれている場合、 DIV small-aのみを表示したいと考えています。LEGEND
DIV にテキスト bA が含まれている 場合、 DIV small-bとbig- aのみを表示したいと考えています。

Javascript:

<script>
window.onload = function ShowHide{

    if (document.getElementById('LEGEND').indexOf("a") > 0){
        document.getElementById('small-a').style.display = 'block';}
    if (document.getElementById('LEGEND').indexOf("b") > 0){
        document.getElementById('small-b').style.display = 'block';}
    if (document.getElementById('LEGEND').indexOf("A") > 0){
        document.getElementById('big-a').style.display = 'block';}
    if (document.getElementById('LEGEND').indexOf("a") > 0){
        document.getElementById('big-b').style.display = 'block';}    
</script>
4

5 に答える 5

3

あなたはいくつかのことを忘れています。

  • 関数宣言は次のようにする必要があります

    function functionName(args) { }

  • style.display = "none" を使用して div を非表示にする必要があります。

例：

<div id="LEGEND">abB</div>

<div id="small-a" style="display: none;">This is small-a</div> 
<div id="small-b" style="display: none;">This is small-b</div> 
<div id="big-a" style="display: none;">This is big-a</div> 
<div id="big-b" style="display: none;">This is big-b</div>

<script>
function showElement(id) {
    document.getElementById(id).style.display = "block";
}

window.onload = function ShowHide() {
    var legend = document.getElementById("LEGEND").innerHTML;

    if(legend.indexOf("a") != -1) showElement("small-a");
    if(legend.indexOf("b") != -1) showElement("small-b");
    if(legend.indexOf("A") != -1) showElement("big-a");
    if(legend.indexOf("B") != -1) showElement("big-b");
}
</script>
于 2009-11-20T17:10:43.697 に答える
2

問題は、が既にブロックレベルの要素である場合に、コードが他のdiv要素をブロック レベルの要素に変更することです。div最初は CSS を使用して表示しないように設定してから、JavaScript で表示する必要があります。

代わりにこれを試してください：

<div id="LEGEND">abAB</div>       

<div id="small-a" style="display: none;"></div>        
<div id="small-b" style="display: none;"></div>        
<div id="big-a" style="display: none;"></div>        
<div id="big-b" style="display: none;"></div>

<script type="text/javascript">
  window.onload = function() {
    if (document.getElementById('LEGEND').indexOf('a') > 0) {
      document.getElementById('small-a').style.display = 'block';
      ...
      // etc.
    }
  }
</script>
于 2009-11-20T17:15:34.893 に答える
1

私なら、こうします。HTML 部分に触れる必要はありません。すべてが JavaScript で行われます。

CDEFGHに拡張できます...

<div id="small-X" style="display: none;">タグごとに設定する必要もありません。:-)

<body>
<script>

window.onload=function(){

    x=document.getElementsByTagName("div");

    //first hide everything with small- or big-

    for(i in x)
        if(/small-|big-/.test(x[i].id))
            x[i].style.display="none";

    //then turn on each tags based on LEGEND

    x= document.getElementById("LEGEND").innerHTML;
    for(i=0;i<x.length;i++)
        document.getElementById((x[i]<='Z'?'big-':'small-')+x[i].toLowerCase()).style.display='block';

}
</script>
<div id="LEGEND">aAB</div>

<div id="small-a">a</div> 
<div id="small-b">b</div> 
<div id="big-a">A</div> 
<div id="big-b">B</div>
</body>
于 2009-11-20T17:30:22.940 に答える
1

まず、window.onload が呼び出されていることを確認してください。

window.addEventListener('load', ShowHide, false);

function ShowHide()
{...

次に、要素の InnerHTML を確認する必要があります。

if (document.getElementById('LEGEND').innerHTML.match("a") == "a"){...

3 番目に、各 if ステートメントには、else も含める必要があります (divName を実際の div 名に置き換えます)。

else {
    document.getElementById('divName').style.display = 'none'}

それが役立つことを願っています!

~md5sum~

編集：

また、これについて 100% 確信があるわけではありませんが、構文は次のようになると思います。

window.onload = function ShowHide{

完全に失敗します。構文は次のようにする必要があると思います。

window.onload = function(){

于 2009-11-20T17:13:50.623 に答える
0

style.displayプロパティをに設定する必要がありますnone。

于 2009-11-20T17:07:44.453 に答える