2017-12-04 1 views
1

웹 개발에 대한 새로운 시도에서 새로운 문제를 발견했습니다. 클릭 할 때 다른 아이콘을 변경해야합니다. 나는 아이콘의 id를 보내는 자바 스크립트에서 함수를 얻고 요소를 얻은 후에 keyboard_arrow_up을 keyboard_arrow_down으로 변경하려고합니다. 그러나 그것은 수행되지 않는 부분입니다. keyboard_arrow_up 값을 얻으려면 어떻게해야합니까?자바 스크립트를 사용하여 아이콘 변경

<i id="icon1" onclick="change('icon1')" class="material-icons">keyboard_arrow_up</i> 

function change(iconID) { 
var item =document.getElementById(iconID); 
if (item) {} 
} 

답변

0

, 당신은 기능

function changeIcon(classname or id) { 
    $("i", this).toggleClass("icon-circle-arrow-up icon-circle-arrow-down"); 
} 

참고 이런 종류의 필요한 것 같은데 : 위의 용액에 아이콘이 인터넷에서 복사, 거기에 당신의 욕망의 아이콘을 사용하시기 바랍니다.

+0

JQuery와 요구되지 않은 : P –

+0

이 JQuery와, 그는 순수한 JS –

0

기억 아이콘은 단지 CSS 클래스이므로, 함수는 자바 스크립트 함수에서 다른 클래스를 변경해야합니다.

function change(iconID) { 
var element = document.getElementById(iconID); 

if (element.classList.contains("keyboard_arrow_up")) { 

    element.classList.add("keyboard_arrow_down") 

    } else { 

    element.classList.add("keyboard_arrow_up") 
    } 
} 
+0

을 필요로하지만, 변화가 작동을 중지 할 경우 내 클래스는 재료 아이콘입니다. –

+0

js를 사용하여 material-icons 클래스를 변경할 수 없습니까 ?? 나는 이것이 단지 클래스라고 생각하지만,이 방법을 사용해보십시오. 그러나 작동하지 않는다면, js 라이브러리는 프로젝트에서 무엇을 사용하고 있습니까? 이 예제에서는 "keyboard_arrow_down"과 사용할 클래스의 다른 클래스를 변경하십시오. 이것은 순수 js를 가진 토글 클래스와 같습니다. –

0

이것은 일시적인 해결책이며 글꼴 위젯 아이콘으로 Google 디자인 자료의 아이콘을 변경해야했습니다. 그러나 계속 조사 할 것입니다.

<i id="icon1" onclick="change('icon1')" class="fa fa-chevron-up" aria hidden="true"> 

function change (iconID){ 
if(document.getElementById(iconID).className=="fa fa-chevron-up"){ 
document.getElementById(iconID).className = "fa fa-chevron-down"; 
}else{ 
document.getElementById(iconID).className = "fa fa-chevron-up"; 
} 
} 
관련 문제