클릭시 수업을 전환하는 방법은 무엇입니까?

-1

나는 이것이 간단한 질문이라는 것을 알고 있지만 나는 성공하지 못하고 놀고있다. 나는클릭시 수업을 전환하는 방법은 무엇입니까?

<a id="mute"><i class="icon-volume"></i></a>

내가 .icon 볼륨 오프를하기 위해 클릭 할 때 클래스 .icon 볼륨을 전환 할 수 있도록하려면 다음과 같은 코드를 가지고있다.

도움을받을 수있는 사람이 누구든! 감사

출처

2014-03-04 user3000995

성공하지 못했다고 대답하셨습니까? – ZenMaster

당신은 jQuery를

$('#mute').on('click', function() { 
    var el = $(this).find('i'); 
    if (el.hasClass('icon-volume')) { 
     el.removeClass('icon-volume'); 
     el.addClass('icon-volume-off'); 
    } else { 
     el.removeClass('icon-volume-off'); 
     el.addClass('icon-volume'); 
    } 
});

를 사용할 수 있습니다 또는 당신은 단지

$('#mute').on('click', function() { 
    var el = $(this).find('i'); 
    if (el.hasClass('icon-volume-off')) { 
     el.removeClass('icon-volume-off'); 
    } else { 
     el.addClass('icon-volume-off'); 
    } 
});

출처

2014-03-04 04:05:01

사용자가 jQuery가 아니라 Javascript를 요구하고 있습니다. Javascript 태그는 특별히 '프레임 워크/라이브러리 용 태그가 포함되어 있지 않으면 순수한 JavaScript 응답이 필요합니다.'라고 말합니다. –

이

var a = document.getElementById("mute"); 
    a.onclick = function(e){ 
    var cl = a.firstChild.getAttribute('class'); 
    if(cl == "icon-volume"){ 
     a.firstChild.setAttribute('class','icon-volume-off'); 
    }else{ 
     a.firstChild.setAttribute('class','icon-volume'); 
    } 
    };

을 시도해보십시오 icon-volume-off 클래스를 추가하고 CSS는 icon-volume 클래스보다 우선 확인 할 수

데모보기 here

출처

2014-03-04 04:08:42

클래스를 어떻게 토글합니까? –

검사가 답변을 업데이트했습니다. –

경고 : : 이것은 상대적으로 새로운 속성입니다. 계속하기 전에 compatibility table from Mozilla's Developer Network을 확인하십시오. IE 9 (또는 이하)가 중요하다면, 이것은 당신이 찾고있는 대답이 아닙니다.

DOM 요소에는 classList이라는 속성이 있습니다. 3 가지 방법은 add, remove 및 toggle입니다. 귀하의 경우에는

var el = document.querySelector('i'); 
el.onclick = function() { 
    el.classList.toggle('icon-volume'); 
    el.classList.toggle('icon-volume-off'); 
}

아주 간단합니다.

출처

2014-03-04 04:46:46 thealtus

클릭시 수업을 전환하는 방법은 무엇입니까?

답변

관련 문제