リンク内の要素のJQuery/JS onclick changeクラスクリック

Question

私はブートストラップを使用していくつかのドロップダウンを持っており、クリックされたリンク内の私のspan要素のクラスを変更する簡単な関数でコーディングしたいと思います。明確にするために

...ここで私が持っているHTMLの例です：

<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false" 
    onclick="toggleIcon()"> 
    <span class="glyphicon glyphicon-knight"></span> 
    Drop Down Title 
    <span class="glyphicon glyphicon-triangle-bottom"></span> 
</a> 
<div class="collapse" id="collapse-panel"> 
    <!-- content --> 
</div> 

私はglyphicon glyphicon-triangle-bottomとglyphicon glyphicon-triangle-topの間で変更するために、第2のスパンクラスを切り替えることができます（JSまたはJQueryを使用して）機能を探しています。

この機能は複数のドロップダウンで機能する必要があります。どんな助けでも大歓迎です。

Answer 1

$('a[data-toggle="collapse"]').click(function(){ 
$(this).find('.glyphicon-triangle-bottom, .glyphicon-triangle-top').toggleClass('glyphicon-triangle-top glyphicon-triangle-bottom'); 
}); 

またこれはdata-toggle="collapse"属性を持つすべてのアンカータグのために働く必要がありますonclick="toggleIcon()"

を削除します。

Answer 2

$(function(){ 
 
    $('#checkcls').click(function(){ 
 
    
 
    if($('#tglcls').hasClass('glyphicon-triangle-bottom')){ 
 
    $('#tglcls').removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top'); 
 
    //to check class 
 
    alert($("#tglcls").attr('class')); 
 
    } 
 
    else{ 
 
     $('#tglcls').addClass('glyphicon-triangle-bottom').removeClass('glyphicon-triangle-top'); 
 
    //to check class 
 
    alert($("#tglcls").attr('class')); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false" id='checkcls'> 
 
    <span class="glyphicon glyphicon-knight"></span> 
 
    Drop Down Title 
 
    <span class="glyphicon glyphicon-triangle-bottom" id='tglcls'></span> 
 
</a> 
 
<div class="collapse" id="collapse-panel"> 
 
    <!-- content --> 
 
</div>

それはあなたのお役に立てば幸いです。

Answer 3

かなり簡単 - より良い$の.click（）関数を使用して、あなたのクラスが権利を取得する：

<a data-toggle="collapse" class="toggle-icon" href="#collapse-panel" aria-expanded="false"> 
<span class="glyphicon glyphicon-knight"></span> 
Drop Down Title 
<span class="icon-toggle glyphicon glyphicon-triangle-bottom"></span> 
</a> 
<div class="collapse" id="collapse-panel"> 
<!-- content --> 
</div> 

私がここまでやったが、トップリンクにトグルアイコンのクラスを追加しました次のようにしてglyphiconのスパンにアイコン、トグルのクラスが... JSは次のとおりです。

// On Toggle-Icon Click 
$('.toggle-icon').click(function(){ 
// Set Icon To toggle in function 
var IconToToggle = $(this).find('.icon-toggle'); 
// If the icon is the bottom icon 
if (IconToToggle.hasClass('glyphicon-triangle-bottom')) { 
// Change the icon to the top icon 
IconToToggle.removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top'); 
// Otherwise 
} else { 
// Change the top icon to the bottom icon 
IconToToggle.removeClass('glyphicon-triangle-top').addClass('glyphicon-triangle-bottom'); 
} 
}) 

注釈はそう、あなたがより良いコードを読み取ることができました。お役に立てれば！

https://jsfiddle.net/khxehd05/

Answer 4

これまでのところ答えはここで私は（私の愚見で）だけで軽度-OKを検討します。瞬間を取り、読み：

HTML：：

Decoupling Your HTML, CSS, and JavaScript

私はそれが本当に読みやすく、保守が見えるようにいくつかのことを変更します

<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false"> 
    <span class="glyphicon glyphicon-knight"></span> 
    Drop Down Title 
    <span class="glyphicon glyphicon-triangle-bottom hide-on-expanded"></span> 
    <span class="glyphicon glyphicon-triangle-top hide-on-collapsed"></span> 
</a> 
<div class="collapse" id="collapse-panel"> 
<!-- content --> 
</div> 

CSS：

[data-toggle="collapse"][aria-expanded="false"] .hide-on-collapsed{ 
    display: none; 
} 

[data-toggle="collapse"][aria-expanded="true"] .hide-on-expanded{ 
    display: none; 
} 

Working JsFiddle Example

1. インライン関数を使用することは絶対に避けてください。 （onclick="toggleIcon()"）
2. CSSを利用して、ブートストラップはすでにhtmlとcssだけを書くだけです。
3. 完全に再利用可能で、使用するグリフは気にせず、JavaScriptも必要ではなく、イベントやクラスに関してハードコードされたものはありません。