Javascript類更改點擊

我是絕對的JS noob，需要一點幫助。我使用的引導3.1.1Javascript類更改點擊

<a class="" 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我該怎麼做呢？

在此先感謝！

來源

2014-04-12 ScubaBen

闖闖：

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

和腳本：

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

而回的第一次嘗試：

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

編輯

要在兩個類之間進行切換：

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

來源

2014-04-12 18:51:10 phylax

你的第二個解決方案工作。但現在我也需要相反的行爲。當我的容器再次崩潰時，它會切換回來... – ScubaBen

你的意思是當你再次點擊時它應該回到'icon-chevron-sign-down'？它爲我的答案添加了一個編輯。 – phylax

嗨phylax，我嘗試過，但仍然沒有得到它:) - 當我使用以及您編輯過的腳本pagefooter，沒有任何反應。唯一的工作是你中線。 yor函數適合的html是什麼？ – ScubaBen

你可以用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。該代碼稍微複雜一些。讓我知道，如果這就是你要找的，我會更新這個答案。

來源

2014-04-12 18:56:13 itsananderson

'-sign-down'不是一個類 – phylax

我避免不得不一遍又一遍地輸入「icon-chevron-sign-down」。如果這很讓人困惑，我會更新我的答案。 – itsananderson

你已經錯過了選擇器中的領先溺愛。 – terales

使用setAttribute

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

來源

2014-04-12 18:58:01

只需更換在script標籤類（IE8 +）（將其關閉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'); 
    }); 

});

來源

2014-04-12 18:58:56 terales

Javascript類更改點擊

回答

相關問題