更改导航图标

Question

我的页面下面有以下导航：

<ul class="fa-ul" id="filter">
    <li><i class="fa-li fa fa-folder-o"></i><a href="{{route('fotoindex')}}">Semua Foto</a></li>
    @forelse($albums as $al)
    <li><i class="fa-li fa fa-folder-o"></i><a href="{{route('fotofilter', $al->slug)}}" name="album">{{$al->nama}}</a></li>
    @empty
    @endforelse
</ul>

在浏览器中使用以下代码打开给定active元素中的网址时，我已设法将a类添加到a元素：

<script type="text/javascript">
    jQuery(function($) {
        var path = window.location.href;
        $('#filter li a').each(function() {
            if (this.href === path) {
                $(this).addClass('active');
            }});
    });
</script>

现在我想知道如何更改i元素图标类？让我们说如果网址被打开我想将图标类从fa-li fa fa-folder-o更改为fa-li fa fa-folder-open-o

全部，谢谢！

Answer 1

$('#filter li a').each(function() {
  if (this.href === path) {
    $(this).siblings('i').removeClass("fa-folder-o").addClass("fa-folder-open-o active");
  }
});