javascript - 如何获得具有匹配数据属性值的 dom 元素？

Question

我有一个函数可以从悬停的元素中获取数据名称属性值。我想获取页面上具有匹配的“data-name-match”属性值的 dom 元素，以便我可以向其添加一个类。

我已经完成了大部分工作，但我无法找出与该元素匹配的最后一步。在这种情况下是否可以使用模板文字来匹配“name”变量值？

const blocks = [...document.getElementsByClassName('footer-block_icon-block')];

console.log(blocks)

blocks.forEach(block => {
  block.addEventListener('mouseover', () => {
    const name = block.dataset.name;
    console.log({name})

    const highlight = document.querySelectorAll('[data-name-match=""]')
    console.log({highlight})
  });
})

<div class="footer-blocks">
  <div class="footer-block footer-block_header-block" data-name-match="market">
    <img src="<?php echo get_bloginfo('template_directory'); ?>/img/logo_winstons-market-white.png" alt="">
    <ul>
      <li><a href="">About</a></li>
      <li><a href="">Catering Menu</a></li>
      <li><a href="">Directions</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </div> 
  <div class="footer-block footer-block_header-block" data-name-match="sausage">
    <img src="<?php echo get_bloginfo('template_directory'); ?>/img/logo_winstons-sausage-white.png " alt="">
    <ul>
      <li><a href="">About</a></li>
      <li><a href="">Ordering</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </div> 
  <div class="footer-block footer-block_header-block" data-name-match="ashford">
    <img src="<?php echo get_bloginfo('template_directory'); ?>/img/logo_ashford-house-white.png" alt="">
    <ul>
      <li><a href="">About</a></li>
      <li><a href="">Dinner</a></li>
      <li><a href="">Lunch & Breakfast</a></li>
      <li><a href="">Directions</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </div>
  <div class="footer-block footer-block_icon-block" data-name="market">
    <div class="footer-block_icon-block-header">
      <i class="fas fa-home"></i>
      <a href="">
        7959 159th Street
        <br>
        Tinley Park, IL 60477
      </a>
    </div>
    <div class="footer-block_icon-block-body">
      <ul>
        <li><i class="fas fa-phone"></i>708-633-7500</li>
        <li><i class="fas fa-fax"></i>708-633-7552</li>
        <li>
          <i class="fas fa-clock"></i>
          <ul class="icon-block_sub-list">
            <li>Mon - Sat: 9am - 6pm</li>
            <li>Sun: 10am - 3pm</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="footer-block footer-block_icon-block" data-name="sausage">
    <div class="footer-block_icon-block-header">
      <i class="fas fa-home"></i>
      <a href="">
        4701 West 63rd Street
        <br>
        Chicago, IL 60629
      </a>
    </div>
    <div class="footer-block_icon-block-body">
      <ul>
        <li><i class="fas fa-phone"></i>773-767-4353</li>
        <li><i class="fas fa-fax"></i>773-767-0470</li>
        <li>
          <i class="fas fa-clock"></i>
          <ul class="icon-block_sub-list">
            <li>Tues - Thurs: 8am - 3pm</li>
            <li>Sun - Mon: Closed</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="footer-block footer-block_icon-block" data-name="ashford">
    <div class="footer-block_icon-block-header">
      <i class="fas fa-home"></i>
      <a href="">
        7959 West 159th St.
        <br>
        Tinley Park, IL 60477
      </a>
    </div>
    <div class="footer-block_icon-block-body">
      <ul>
        <li><i class="fas fa-phone"></i>708-633-7600</li>
        <li><i class="fas fa-fax"></i>708-633-7552</li>
        <li>
          <i class="fas fa-clock"></i>
          <ul class="icon-block_sub-list">
            <li>Mon - Thurs: 7am - 9pm</li>
            <li>Fri & Sat: 7am - 10pm</li>
            <li>Sun: 7am - 8pm</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

如果您想要具有属性data-name-match的所有元素，那么您可以这样做

const highlight = document.querySelectorAll('[data-name-match]');

如果您想匹配特定的一个，则使用 querySelectorAll 可能没有意义，因为从技术上讲您只是要求一个，因此您可以使用模板文字来做到这一点(正如您已经指出的那样) ，像这样:

const highlight = document.querySelector(`[data-name-match="${name}"]`);