<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
<a href="abc.mp4" class="download-button">abc.mp4</a>
</td>
これは私のHTMLコードです。誰かがクラス「ダウンロードボタン」のリンクをクリックすると実行されるJavascriptコードがあります
コードは次のようになります
$(".download-button").click(function(event){
document.querySelector('.download-progress-container').style.display = 'none';
});
download-button2番目のtd要素のリンクをクリックすると、最初のtd要素がdownload-progress-container非表示になります。
$(this)クリックされた要素を非表示にするために使用
$(".download-button").click(function(event){
var _t = $(this);
_t.parents('td').find('.download-progress-container').hide();
//document.querySelector('.download-button').style.display = 'none';
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
<a href="javascript:;" class="download-button">abc.mp4</a>
</td>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
<a href="abc.mp4" class="download-button">abc.mp4</a>
</td>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
<a href="abc.mp4" class="download-button">abc.mp4</a>
</td>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加