jQuery - Div2でDiv1を表示し、次にドキュメントでDiv1を非表示にします。

私は単純な問題があります。ユーザーがdivをクリックしたときに動画を表示しようとしています。次に、ユーザーがビデオ上にないページのどこかをクリックすると、そのビデオを非表示にします。何百万回も行ったが、私はそれを行う方法やStackoverflowの他の部分的なソリューションが見つかりませんでした。ここでは完全なコードです：jQuery - Div2でDiv1を表示し、次にドキュメントでDiv1を非表示にします。

<html><head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<!-- CSS --> 
<style>#videoDiv{display:none;}</style> 

<!-- jQuery --> 
<script> 
$(function(){ 
    $(".clickForVideo").click(function(){ 
     $("#videoDiv").show(); 
    }); 
    $(document).click(function(event){ 
     if ($('#videoDiv').is(':visible')) {  
     /* tried replacing above line with this line according to stackoverflow - also failed 
     if(!$(event.target).closest('#videodiv').length) { */ 
      $('#videoDiv').hide(); <!--Reference 1--> 
     } 
    }); 
}); 
</script></head> 

<!-- HTML --> 
<body> 
<div id="videoDiv"><iframe src="https://www.youtube.com/embed/S28Zux62a_0"> 
</iframe></div> 
<div class="clickForVideo">Click me to show video</div> 
</body></html>

私は「.clickForVideo」div要素をクリックすると、何の映像は表示されません。「Reference 1」というラベルの付いた行をコメントアウトしてから「.clickForVideo」をクリックすると、video/divが表示されますが、意図したとおりにドキュメントをクリックすると消えません。コードを変更するか、この問題に対して異なる解決方法を提供する方法を教えてください。ありがとうございました。アンドリュー

出典

2017-07-12 user2744032

ザッツにバブリングされているイベントを停止する必要があります。試してください 'event.stoppropagation'（https://api.jquery.com/event.stoppropagation/） – Abhi

clickForVideoもこのドキュメントの一部です。クリックすると、document（親）のclickイベントも呼び出され、再度隠蔽されます。

このお試しください：

$(function(){ 
    $(".clickForVideo").click(function(event) { 
     event.stopPropagation(); //<----- 
     $("#videoDiv").show(); 
    }); 
    $(document).click(function(event){ 
     if ($('#videoDiv').is(':visible')) { 
      if(!$(event.target).closest('#videodiv').length) { 
      $('#videoDiv').hide(); 
      } 
     } 
    }); 
});

event.stopPropagation()（DOCは）** clickForVideo **は、文書の一部であるため、親すなわちdocument

出典

2017-07-12 15:40:54 Abhi

ありがとうございましたAbhi、それは簡単な修正です、それは今動作します。 Fyiでは、 "！$（event.taget）..."の行がないと少しうまく動作します。より良い動作のためにif節を削除するだけです。 – user2744032

喜んで助けた！私のモットーは 'event.stopPropagation（）;'を意識させることでした。あなたの都合によりコードの残りの部分を変更することができます。 – Abhi

jQuery - Div2でDiv1を表示し、次にドキュメントでDiv1を非表示にします。

答えて

関連する問題