javascript - 如何选择与单击的按钮相同的 div 元素
问题描述
<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-button
链接时,第一个元素会隐藏。td
td
download-progress-container
解决方案
获取公共父元素,然后在其中找到要隐藏的元素。
$(".download-button").click(function(event){
// prevent default click event action
event.preventDefault();
// get the td ancestor and get element within that td
$(this).closest('.name').find('.download-progress-container').hide();
});
$(".download-button").click(function(event) {
// prevent default click event action
event.preventDefault();
// get the td ancestor and get element within that td
$(this).closest('.name').find('.download-progress-container').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<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>
<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>
</tr>
</table>