Question

我想向特定链接添加“已访问”数据属性，以向访问者显示已访问的页面。我使用的是Joel脚本，但是我不能只选择特定的链接（例如检查特定的ID或CLASS）。

我已经尝试使用if(links[i].idName=="showcase")在我的HTML代码中选择具有id="showcase"的链接，但是它不起作用。

完整代码：

localStorage.setItem('visited-'+window.location.pathname,true);
var links = document.getElementsByTagName('a');
for (i=0;i<links.length;i++) {   
    if(links[i].idName=="showcase") {
        var link = links[i];
        if (link.host == window.location.host
        && localStorage.getItem('visited-' + link.pathname)) {
           link.dataset.visited = true;
        }
    }
}

感谢您的帮助！

Answer 1

HTML

首先，ID应该是唯一的。如果您需要多个元素具有相同的选择器，请改用类：

<a href="/home">Not affected</a>
<a href="/my-super-project" class="showcase">Affected</a>
<a href="/my-super-project2" class="showcase">Affected</a>

JS

然后，如果您只想获取.showcase链接，而不是进行document.getElementsByTagName('a')，则可以这样做以仅选择所需的链接：

var links = document.getElementsByClassName('showcase');

这是您的最终代码：

localStorage.setItem('visited-' + window.location.pathname, true);

var links = document.getElementsByClassName('showcase');
for (i=0; i<links.length; i++) {   
  var link = links[i];
  if(link.host == window.location.host && localStorage.getItem('visited-' + link.pathname)) {
     link.dataset.visited = true;
  }
}

CSS

由于上述代码会将data-visited属性添加到链接中，因此您可以在样式中使用该属性：

a[data-visited] {
  color: green;
}

注意：：如果您发现样式无效，则可以使选择器更加精确：
.main a.showcase[data-visited] {
  color: green;
}
...或在规则中添加!important标志：
a.showcase[data-visited] {
  color: green !important;
}

仅选择带有getElementsByTagName的特定链接的问题

1 个答案:

HTML

JS

CSS