Проблема с выбором только определенных ссылок с getElementsByTagName - PullRequest
Новая
       19

Проблема с выбором только определенных ссылок с getElementsByTagName

0 голосов
/ 25 декабря 2018

Я хочу добавить атрибут «посещенных» данных к конкретным ссылкам, чтобы показать посетителям, какие страницы они уже посетили.Я использую сценарий Джоэл , но я не могу сделать так, чтобы он только выбирал конкретные ссылки (скажем, проверяя конкретный идентификатор или класс).

Я уже пытался использовать 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;
        }
    }
}

Спасибоза вашу помощь!

1 Ответ

0 голосов
/ 25 декабря 2018

HTML

Во-первых, идентификаторы должны быть уникальными.Если вам нужно, чтобы несколько элементов имели один и тот же селектор, используйте вместо этого класс: 

<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;
}
...