2011-08-15 14 views
0

以下のコードを修正するのに手伝ってもらえますか?コピーして貼り付けて試してみることもできます。 onmouseoverポップアップdivが表示されます。私が(X)をクリックすると、ポップアップのdivが閉じるはずですが、そうではありません。 doubleclicking(X)だけがポップアップdivを閉じます。 Onmouseoverには常にポップアップdivが表示されるはずです。閉じるポップアップdivのJavaScriptヘルプ

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

</head> 
<style type="text/css"> 
.container { 
display:block; 
width:500px; 
height:200px; 
border:1px solid green; 
} 
.advert { 
float:right; 
overflow:hidden; 
width:100px; 
height:30px; 
border:1px solid red; 
} 
.close { 
float:right; 
width:20px; 
height:28px; 
cursor:pointer; 
border:1px solid black; 
} 
</style> 
<body> 

<div class="container" onmouseover='getad(39);' onmouseout='hidead(39);changeback(39);'> 
<div class='advert' id="39" style="display:none;"><div class="close"><a href="javascript:closead(39)">X</a></div></div> 
<input type="text" value="1" id="ad39" /> 
</div> 


<div class="container" onmouseover='getad(40);' onmouseout='hidead(40);changeback(40);'> 
<div class='advert' id="40" style="display:none;"><div class="close"><a href="javascript:closead(40)">X</a></div></div> 
<input type="text" value="1" id="ad40" /> 
</div> 

<script type="text/javascript"> 

function getad(number) { 

    if(document.getElementById('ad'+number).value==1) { 
     if(document.getElementById(number).style.display == "none") { 
     document.getElementById(number).style.display = "block"; 

     } 
    } 

} 

function hidead(number) { 

    if(document.getElementById('ad'+number).value==1) { 
     if(document.getElementById(number).style.display == "block") { 
     document.getElementById(number).style.display = "none"; 

     } 
    } 
} 

function closead(number) { 

    document.getElementById('ad'+number).value = 0; 
    if(document.getElementById(number).style.display == "block") { 
     document.getElementById(number).style.display = "none"; 

     } 



    } 

    function changeback(number) { 

    if(document.getElementById('ad'+number).value==0) { 


    document.getElementById('ad'+number).value = 1; 

    } 
    } 
</script> 
</body> 
</html> 

答えて

1

あなたのIDが間違っている:

<div class='advert' id="39" style="display:none;"> 
<div class='advert' id="40" style="display:none;"> 

は次のようになります。

<div class='advert' id="ad39" style="display:none;"> 
<div class='advert' id="ad40" style="display:none;"> 
0

私はFirefoxであなたのコードを試してみましたが、それが動作します。

IE8では動作しません。

これは...

使用jQueryのまたは別のJSのフレームワークネイティブJavascriptを書くべきではありません主な理由です。

まず、コードをクロスブラウザと互換性のあるものにします。 第二には、コードの唯一の1行が.SHOW()

+0

私はFirefoxでそれをテストし、うまくいきません。コンテナのオンマウスオーバーで広告を表示したい。だからjquery wouldnt 'は違いを生む。 – user892134

0

問題のISNあなたは$(#39).hide()または$(#39)のような;-)

何かをするために必要なものを行いますあなたの広告は削除されていません。 hidead()関数をトリガーするリンクをクリックするには、マウスオーバー時にgetad()をトリガーするdivの上にマウスカーソルを置いておく必要があります。

実際に実行しているのは、アクションをステップ実行する場合です。

"X-リンク" クローズド(番号)のタグのイベントトリガーをクリックしてコードを実行します。 マウス出力イベントが発生し、親に伝播します hidead(number)が発生して実行されます。 マウスオーバーイベントが発生し、親に伝播します。 getad(number)が発生して実行されます。

あなたのイベントはアンロードされ、すぐにリロードされます。多分、あなたが文脈を提供できるなら、私たちはあなたがこれを実行可能にするのを助けることができます。マウスオーバー時に広告をロードし、マウスオーバー時に非表示にして、ユーザーに閉じるボタンを与えたい場合は、どのような状況下では確実ではありません。これはちょうどAJAXなどでX秒ごとにリロードする静的な広告を持っているだけでなく、訪問者を煩わしさせる多くのロード/アンロード/フラッシュコンテンツのようです。

+0

私はあなたの言うことを理解しています、とにかく私の方法を働かせることができますか? onmouseoverを無効にしてonmouseover onmouseoutを再度有効にするとどうなりますか? – user892134

+0

私は実際にはネイティブJSコーディングから離れることから始めます。 jQuery(http://jquery.com)などのフレームワークライブラリを使用することで、この全体の努力(およびほとんどのJSコード)を簡素化できます。そこから、セレクタと連鎖関数を一緒に使用して、イベントを簡単にバインド/アンバインドできます。 $( '#ad39')。val(0); $( '#39')。hide();これにより、必要に応じて値が変更され、広告コンテナが非表示になります。ネイティブでそれを行うために使用する必要があるコードよりもはるかに少ないコード。 jQueryはブラウザ間の互換性を処理します。 – Brian

関連する問題