Почему эти изменения не работают? Как это исправить? - PullRequest
Новая
       3

Почему эти изменения не работают? Как это исправить?

0 голосов
/ 27 апреля 2020

Я хочу изменить класс 'fa-bars' на 'fa-times', используя JS. Но произошла ошибка: 

function load_cross() {
		var y =	document.getElementById("get-bar");
		y.classList.toggle('fa-times');
		}	
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">	
</head>
<body>

	<span onclick="load_cross()"><i class="fa fa-bars" aria-hidden="true" id="get-bar"></i></span>
	
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 27 апреля 2020

Вы можете изменить имя класса <i> при нажатии кнопки, используя простой метод Javascript classList.remove() и метод classList.add(). Попробуйте, как показано ниже. 

function load_cross(){

    var y= document.getElementById("get-bar");

    if(y.classList.contains("fa-bars")){

        y.classList.remove("fa-bars");
        y.classList.add("fa-times");
    }

    else if(y.classList.contains("fa-times")){

        y.classList.remove("fa-times");
        y.classList.add("fa-bars");
    }
}
0 голосов
/ 27 апреля 2020

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

Следующая строка кода будет только добавлять / удалять класс fa-times из вашего значка . 

y.classList.toggle('fa-times');

Если вы хотите переключаться между 'fa-bars' и 'fa-times', вам нужно переключиться для обоих классов. 

y.classList.toggle('fa-times');

y.classList.toggle('fa-bars');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...