jQuery Не отвечает на второе «это» - PullRequest
Новая
       1

jQuery Не отвечает на второе «это»

0 голосов
/ 28 февраля 2020

Я написал эту функцию, чтобы переключаться между шрифтами. 

function toggleClass() {
    $('.fa-arrow-up').on('click', function (event) {
        $('.info-section').toggleClass('hidden');
        $(this).addClass('fa-arrow-down').removeClass('fa-arrow-up')
        // console.log($(this))
    })

    $('.fa-arrow-down').on('click', function (event) {
        $('.info-section').toggleClass('hidden');
        $(this).addClass('fa-arrow-up').removeClass('fa-arrow-down')
        console.log($(this))
    })
}
$(toggleClass);

При первом щелчке, когда класс fa-arrow-up, он работает, когда класс fa-arrow-down, и я нажимаю на него. во второй раз он переключает .info-section, но не заменяет fa-arrow-down на fa-arrow-up. Любые предложения о том, почему эта функция не работает в обоих направлениях?

ОБНОВЛЕНИЕ добавления HTML: 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <i class="fas fa-arrow-up" aria-hidden="false"></i>
<script src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
        <script src="https://kit.fontawesome.com/c79911a95b.js" crossorigin="anonymous"></script>
    </body>
    </html>

Ответы [ 2 ]

1 голос
/ 28 февраля 2020

Надеюсь, это поможет вам. 

$('.fa-arrow-up').on('click', function(event) {
  $(this).toggleClass('fa-arrow-down fa-arrow-up')
})
<i class="fas fa-arrow-up" aria-hidden="false"></i>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://kit.fontawesome.com/c79911a95b.js"></script>
0 голосов
/ 28 февраля 2020

Я нашел решение для проблемы.

HTML

<button class="arrow-icon" type="button">
    <i class="fa fa-arrow-up"></i>
    <i class="fa fa-arrow-down"></i>
</button>

CSS

.arrow-icon .fa-arrow-up{
    display: inline-block;
}
.arrow-icon .fa-arrow-down{
    display: none;
}
.arrow-icon.active-icon .fa-arrow-up{
    display: none;
}
.arrow-icon.active-icon .fa-arrow-down{
    display: inline-block;
}

JS

$(function(){
    $('.arrow-icon').on('click', function(){
        $('.info-section').toggleClass('hidden');
        $(this).toggleClass('active-icon');
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...