Блог

Главная - Вопросы по программированию - Добавьте класс к последним четырем элементам «а» в javascript

Добавьте класс к последним четырем элементам «а» в javascript

#javascript

Вопрос:

 <a id="aitems" target="_blank" rel="noopener noreferrer" href="<?= $block->getItemUrl($item)?>"><?=$item['name']?>

У меня есть этот тег «a», который отображает 5 элементов, которые являются опциями меню. Но мне нужны эти 4 из этих 5 элементов, чтобы открыть новый URL-адрес на другой вкладке, поэтому я добавил целевой класс.
Но, конечно, если я сделаю это таким образом, то первый элемент «а» тоже откроется на новой вкладке, и я этого не хочу.

Это то, что я пытаюсь сделать

  function addClass(){
        const list = document.querySelector('#aitems');

        // list[0].removeClass("target");
        list[0].addClass("test1");
        list.firstElementChild.classList.add("test");
    }
    addClass();

Я просто пытаюсь или удалить целевой класс из первого элемента, или добавить целевой класс к остальным 4 элементам.
Это всегда выдает мне ошибки, из-за которых я не могу прочитать список классов или добавить класс.
Я уже пробовал использовать getElementById или byClassName

Я делаю это в файле .phtml.

Комментарии:

1. JavaScript не может видеть ваш PHP-код, каков сгенерированный HTML? В любом случае, ваш шаблон имеет статический id атрибут. У вас не может быть одинаковых удостоверений личности, так же как у вас не может быть разных автомобилей с одним и тем же номерным знаком.

Ответ №1:

Так что я в конце концов решил проблему, я оставлю ее здесь, если она кому-то понадобится

 <a class="model-a" target="_blank" rel="noopener noreferrer" href="<?= $block->getItemUrl($item)?>"><?=$item['name']?>
</a>
 
 function addClass() {
  var divs = document.querySelectorAll('.model-a');
  for (var i = 0; i < divs.length; i  ) {
    divs[0].classList.add('newclass');
    divs[0].removeAttribute('target');
  }
}
addClass();

В classList.add этом нет необходимости, но я оставлю это.

Метки: