我不确定标题是否有意义,但是从PHP我循环回应这个HTML:
<a href='#' data-toggle='collapse' data-target='#myid'>
<span class='fa fa-caret-down'></span>
</a>
<div id='myid' class='collapse'>Some Content</div>
我希望fa-caret-down
在点击时更改为fa-caret-up
,反之亦然。我希望代码是内联的,所以我可以在这个实例中输出它。我怎样才能做到这一点?
您可以将onClick
内联事件添加到锚点并附加一个在类之间切换的函数,如:
function toggleClass(self) {
$('span', self).toggleClass('fa-caret-down fa-caret-up');
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' data-toggle='collapse' data-target='#myid' onClick="toggleClass(this)">
<span class='fa fa-caret-down'></span>
</a>
<div id='myid' class='collapse'>Some Content</div>
建议
最好在所有锚中使用公共类,并将click事件附加到此公共类,如:
<a href='#' data-toggle='collapse' data-target='#myid' class="icon_toggle">
<span class='fa fa-caret-down'></span>
</a>
<div id='myid' class='collapse'>Some Content</div>
在您的js代码中,您应该使用jQuery方法toogleClass()
附加在两个类之间切换的click事件,如:
$('body').on('click', '.icon_toggle', function(){
$('span', this).toggleClass('fa-caret-down fa-caret-up');
});
如果有人有兴趣使用Vanilla JS处理它而不使用外部库。
var carets = document.querySelectorAll('.up-down');
carets.forEach(function(caret){
caret.addEventListener("click", function(){
this.getElementsByTagName('span')[0].classList.toggle('fa-caret-down');
this.getElementsByTagName('span')[0].classList.toggle('fa-caret-up');
});
})
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<a href='#' data-toggle='collapse' data-target='#myid' class="up-down">
<span class='fa fa-caret-down'></span>
</a>
<div id='myid' class='collapse'>Some Content</div>