Блог

Главная - Вопросы по программированию - Как изменить фонту. значок для другого класса с тем же именем

Как изменить фонту. значок для другого класса с тем же именем

#javascript #html #css

Вопрос:

Я пытался связаться с Фонтой. значок для другого, имеющего то же имя класса. Я попытался добавить имя класса с именем «активный». Поскольку было только два значка для изменения взад и вперед, я подумал, что HTML может показать нужный мне значок, проверив, активен ли значок. Когда значок «активен», я хочу его отобразить, но если нет, мне это не нужно. Я думаю, проблема в том, что у них одинаковые имена классов.

введите описание изображения здесь

JS отобразил эту проблему. введите описание изображения здесь

Кроме того, есть только один способ скрыть элемент?? Даже если я добавлю их ниже,

 opacity: 0;  visibility: hidden;

Я увидел пустое место на странице. Мне это не понравилось, поэтому я написал display: none; вместо этого. Но я просто хочу знать, что есть несколько других способов скрыть элемент. введите описание изображения здесь

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

1. пожалуйста, опубликуйте свой код в виде текста, а не изображения

2. похоже, вы могли бы, возможно, перезапустить массив, через который проходите

3. Не уверен, что я понял, что вы имеете в виду, меняя значок на другой, потому что, я думаю, вы можете достичь этого без использования javascript. Если вы хотите изменить значок при наведении или «перемещение мыши», почему вы не попытались изменить содержимое элемента при наведении, чтобы отображался новый значок. Если мне не совсем ясно, скажите мне, хотите ли вы просто изменить значок при наведении курсора.

Ответ №1:

Я не очень хорошо пойму ваш запрос, но, насколько я понимаю, вы хотите изменить значок использования js.
Это можно сделать только с помощью CSS.
«Просто используйте className.active, чтобы просто изменить стиль элемента класса. «Например:- .bi-list.active» Он изменит стиль только для класса, у которого в качестве элемента класса есть .active».

Для CSS Только с одинаковым Cl

 let icon1 = document.querySelectorAll('.bi')[0];  let icon2 = document.querySelectorAll('.bi')[1];  function changeIcon(){  icon1.classList.toggle('active');   icon2.classList.toggle('active');   } 
 i{  display:none; } i.active{  display:inline; } 
 lt;headgt; lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css"gt; lt;/headgt; lt;bodygt; lt;spangt; lt;i class="bi bi-list active" onclick="changeIcon()"gt;lt;/igt; lt;i class="bi bi-x-lg" onclick="changeIcon()"gt;lt;/igt; lt;/spangt; lt;/bodygt;

имя задницы

Для Javascript:

 let icon = document.querySelector('.bi-list'); function ChangeIcon(){  if(icon.classList.item(1) == "bi-list"){  icon.classList.remove("bi-list");  icon.classList.add("bi-x-lg");  }  else{  icon.classList.remove("bi-x-lg");  icon.classList.add("bi-list");  } } 
 .menu .bi{  color:blue;  display:inline; } 
 lt;htmlgt;  lt;headgt;  lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css"gt;  lt;/headgt;  lt;bodygt;  lt;span class="menu"gt;  lt;i class="bi bi-list" onclick="ChangeIcon()"gt;lt;/igt;  lt;!--lt;i class="bi bi-list active" onclick="ChangeIcon()"gt;lt;/igt;  lt;i class="bi bi-x-lg"gt;lt;/igt;--gt;  lt;/spangt;  lt;/bodygt; lt;/htmlgt;

И для тех же классов Вы можете использовать документ.Запросите все(‘.bi’)[0] для доступа к 1-му элементу и (‘.bi’)[1} для доступа ко 2-му элементу.

Если вы хотите, чтобы я что-то изменил в этом коде, дайте мне знать!

Метки: