javascript - 如果此 div 中图像的 url 与当前页面相同，则将类添加到 div

Question

我有一个列表(<li>)，看起来像这样:

<div class="image_frame">
     <div>
          <div>
               <a href="link 1"><img /></a>
          </div>
     </div>
</div>

我想给 div 添加额外的类如果当前页面 URL 与元素 URL 相同，则使用 image_frame(如果元素链接与我访问过的页面相同，我只想突出显示此特定的 div)。

我找到了非常接近的解决方案，但它向当前链接添加了类，而不是父类 div但高出 3 个级别。

JavaScript add class depending on current URL

有什么建议吗？谢谢!

Answer 1

"use strict";

let div = document.querySelector('.image_frame');
let ref = 'http://domains.com/link-1/'; // delete this, it's just for test
// let ref = window.location.href; // insert this
let url = div.querySelector('img').parentNode.href;

if (url === ref) {
    div.className += ' new_class';
    console.log('DIV class was changed to: ' + div.className);
}

<div class="image_frame">
    <div>
        <div>
            <a href="http://domains.com/link-1/"><img /></a>
        </div>
    </div>
</div>