2014-04-12 3 views
0

나는 절대적인 JS 문제이며 약간의 도움이 필요하다. 나는 그렇게 할 방법 .icon-chevron-sign-down.icon-chevron-sign-up로 변경해야합니다 링크를 클릭에서 지금자바 스크립트 종류 변경하기

<a class="" data-toggle="collapse" data-parent=".event-list-links" href="#collapse-<?php the_ID(); ?>"> 
<i class="icon-chevron-sign-down"></i> 
</a> 

부트 스트랩 3.1.1를 사용하고 있습니다?

미리 감사드립니다.

답변

1

또 다른 시도 :

<i class="icon-chevron-sign-down" onclick="changeClass(this)"></i> 

그리고 스크립트 :

이 두 클래스 사이를 전환하려면

<i class="icon-chevron-sign-down" onclick="(function (e) { e.className = 'icon-chevron-sign-up'; })(this)">halo</i> 

편집 : 다시 첫 번째 시도에

function changeClass(e) { 
    e.className = 'icon-chevron-sign-up'; 
} 

그리고 :

function changeClass(e) { 
    if (e.className === 'icon-chevron-sign-up') { 
    e.className = 'icon-chevron-sign-down'; 
    } else { 
    e.className = 'icon-chevron-sign-up'; 
    } 
} 
+0

두 번째 솔루션했다. 하지만 지금은 반대의 행동이 필요합니다. 다시 컨테이너가 무너지면 컨테이너가 다시 전환됩니다 ... – ScubaBen

+0

다시 클릭하면 'icon-chevron-sign-down'으로 돌아갑니다. 그것은 내 대답에 편집을 추가했습니다. – phylax

+0

안녕 phylax, 나는 시도했지만 여전히 그것을 얻지 않는다 :) - 을 편집 스크립트와 함께 사용하면 pagefooter, 아무 일도 일어나지 않습니다. 일하는 유일한 것은 중산층입니다. 함수에 맞는 html은 무엇입니까? – ScubaBen

0

jQuery를 사용하면 쉽게 할 수 있습니다.

<a class="toggle-link" data-toggle="collapse" data-parent=".event-list-links" href="#collapse-<?php the_ID(); ?>"> 
    <i class="icon-chevron-sign-down"></i> 
</a> 

그런 다음 바로 icon-chevron-sign-down 클래스를 제거하고 icon-chevron-sign-up 클래스를 추가하는 클릭 핸들러를 추가 : 당신이 그것을 선택할 수 있도록 태그에 클래스를 추가 할 수 있습니다.

$'.toggle-link').click(function() { 
    $(this).find('.icon-chevron-sign-down'). 
     removeClass('icon-chevron-sign-down'). 
     addClass('icon-chevron-sign-up'); 
    return false; 
}); 

다시 클릭하면 icon-chevron-sign-down으로 바뀌지 않습니다. 이 코드는 좀 더 복잡합니다. 그것이 당신이 찾고있는 것이라면 알려주세요. 나는이 대답을 업데이트 할 것입니다.

+0

'-sign-down'이 클래스가 아닙니다 – phylax

+0

"icon-chevron-sign-down"을 반복해서 입력하지 않아도됩니다. 혼란 스러우면 내 대답을 업데이트하겠습니다. – itsananderson

+0

선별기에서 최고의 dotes가 누락되었습니다. – terales

0

의 setAttribute 그냥 script 태그에 클래스 (IE8 +)를 대체

Var elem = document.getElementsByTagName('a'); 
Firstelem=elem[0]; 
Firstelem.setAttribute("class","your clAss here"); 
0

를 사용하여 (이 body 태그를 닫기 전에 농담 배치) :

document.onload(function() { 
    var element = document.querySelectorAll('i.icon-chevron-sign-down'); 
    element.onclick(function(e) { 
     element.className.replace('icon-chevron-sign-down' 
           , 'icon-chevron-sign-up'); 
    }); 

}); 
관련 문제