Изменить значок при нажатии (переключить)

У меня есть простой script в jquery для переключения div (show and hide) при нажатии <p> (я использую bootstrap).

HTML:

<p id="click_advance"><i class="icon-circle-arrow-down"></i> Advanced search</p>
<div id="display_advance">
    <p>This is the advance search</p>
</div>

JS:

$('#click_advance').click(function(){
$('#display_advance').toggle('1000');
$(this).html('<i class="icon-circle-arrow-up"></i> Advanced search');

});

Итак, когда я нажимаю в первый раз значок меняется с вниз, но, очевидно, когда я снова нажимаю "click_advance", значок не меняется. Поэтому мне нужен эффект переключения, как шоу и скрыть; но я не знаю, как это сделать с помощью значка.

Ответы

Ответ 1

Вместо того, чтобы каждый раз переписывать html, просто переключите класс.

$('#click_advance').click(function() {
    $('#display_advance').toggle('1000');
    $("i", this).toggleClass("icon-circle-arrow-up icon-circle-arrow-down");
});

Ответ 2

Попробуйте следующее:

$('#click_advance').click(function(){
  $('#display_advance').toggle('1000');
  icon = $(this).find("i");
  icon.hasClass("icon-circle-arrow-down"){
    icon.addClass("icon-circle-arrow-up").removeClass("icon-circle-arrow-down");
  }else{
    icon.addClass("icon-circle-arrow-down").removeClass("icon-circle-arrow-up");
  }
})

или даже лучше, как сказал Кевин:

$('#click_advance').click(function(){
  $('#display_advance').toggle('1000');
  icon = $(this).find("i");
  icon.toggleClass("icon-circle-arrow-up icon-circle-arrow-down")
})

Ответ 3

Если ваша иконка основана на тексте в блоке (лигатуры), а не на классе блока, то будет работать следующее. В этом примере используются значки "+" и "-" значков Google Material как часть MaterializeCSS.

<a class="btn-class"><i class="material-icons">add</i></a>

$('.btn-class').on('click',function(){
    if ($(this).find('i').text() == 'add'){
        $(this).find('i').text('remove');
    } else {
        $(this).find('i').text('add');
    }
});

Изменить: Добавлено отсутствует ); необходимо, чтобы это функционировало должным образом.

Это также работает для JQuery post 1.9, где переключение функций устарело.

Ответ 4

Если .toggle не работает, я бы сделал следующее:

var flag = false;
$('#click_advance').click(function(){
    if( flag == false){
       $('#display_advance').show('1000');
         // Add more code
       flag = true;
    }
    else{
       $('#display_advance').hide('1000');
       // Add more code
       flag = false;
    }
}

Это немного больше кода, но он работает

Ответ 5

Вот очень простой способ сделать это

 $(function () {
    $(".glyphicon").unbind('click');
    $(".glyphicon").click(function (e) {
        $(this).toggleClass("glyphicon glyphicon-chevron-up glyphicon glyphicon-chevron-down");
});

Надеюсь, это поможет: D