javascript - 如何选择与单击按钮相同的 div 的元素

Question

<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';
});

当我点击第二个 td 元素的 download-button 链接时，第一个 td 元素 download-progress-容器隐藏。

Answer 1

获取公共(public)父元素，然后找到其中的元素隐藏。

$(".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>