切換div的第一個元素的類

Question

這可能對我來說很簡單，但我堅持在這里！

代碼：

<a href="#" class="icon">
    <i class="fa fa-arrow-down"></i>
    <h6>Heading</h6>
</a>

點擊時，我想將fa-arrow-down類更改為fa-arrow-up。 我嘗試了很多可能性，但沒有找到解決方案。 請幫助大家...

我嘗試的方法之一是...

$('.icon').click(function () {
    if ($(this).children(':first').hasClass('fa-arrow-down')) {
        $(this).children(':first').removeClass('fa-arrow-down').addClass('fa-arrow-up')
    }
})

console.log($(this).children())輸出：

[i.fa.fa-angle-down, h6, prevObject: n.fn.init[1], context: a.icon]
0:i.fa.fa-angle-down
1:h6

謝謝

Answer 1

您可以使用toggleClass()方法輕松完成此操作，如下所示。

$('.icon').click(function () {
    $(this).children(':first').toggleClass('fa-arrow-up fa-arrow-down')
})

Answer 2

看一下這個：

   $('.icon').click(function () {

    var hasClass = $('.icon:first-child').hasClass('fa-arrow-down');

    if (hasClass) {
        $('.icon:first-child').removeClass('fa-arrow-down').addClass('fa-arrow-up');
    } else {
        $('.icon:first-child').removeClass('fa-arrow-up').addClass('fa-arrow-down');
    }

});

Answer 3

嘗試這個..

$('.icon').click(function () {
 if ($(".icon > i").hasClass('fa-arrow-down')) {
       $(".icon > i").removeClass('fa-arrow-down').addClass('fa-arrow-up')
    }
})