Блог

Главная - Вопросы по программированию - Переключение символа в div по щелчку

Переключение символа в div по щелчку

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я бы ожидал, что следующий код будет переключать содержимое html .articleArrow между стрелками вверх и вниз при .articleTitle нажатии:

jQuery

 $(".articleTitle").click(function () {
    if ($(this).children('.articleArrow').html() == 'amp;#8593;')
        $(this).children('.articleArrow').html('amp;#8595;');
    else if ($(this).children('.articleArrow').html() == 'amp;#8595;')
        $(this).children('.articleArrow').html('amp;#8593;');
});

HTML

 <div class='articleTitle'>
    Blah
    <div class='articleArrow'>
        amp;#8595;
    </div>
</div>

Но это ничего не делает. С другой стороны, если я выну if...else if out и просто установлю символ с $(this).children('.articleArrow').html('amp;#8593;'); его помощью, это сработает. Итак, установка символа работает, if...else если он не срабатывает должным образом, и я не могу понять, почему.

Вы можете просмотреть его в прямом эфире на моем сайте здесь (не волнуйтесь, это не настоящая панель администратора!)

Комментарии:

1. Итак, вы хотите, чтобы символ стрелки переключался при нажатии? (стрелка вверх и стрелка вниз)

2. @Austin Да, я хочу, чтобы он переключался между up и down при нажатии на родительский div

3. Как только объекты HTML вставляются в DOM, объекты анализируются и больше не являются объектами, поэтому html() не возвращают объекты, которые вы могли бы определить, записав свои значения в консоль.

Ответ №1:

Работает для меня, если я использую символы Юникода для сравнения с:

 $(".articleTitle").click(function () {
    if ($(this).children('.articleArrow').html() == '↓') $(this).children('.articleArrow').html('amp;#8593;');
    else if ($(this).children('.articleArrow').html() == '↑') $(this).children('.articleArrow').html('amp;#8595;');
});

Пример jsFiddle

Ответ №2:

Вы можете легко справиться с этим без беспорядка if statement , просто используя .slideToggle метод полного обратного вызова и :visible селектор jQuery.

 $(".articleTitle").click(function () {
    //  1st, i go ahead and asign our arrow element to a variable for use in callback
    var arrow = $(this).find('.articleArrow');
    $(this).siblings('.articleContent').slideToggle("slow", function(){
        //  this is the `complete` callback method
        //  in here, we can now manipulate whatever we need to when the "toggle" is `complete`
        arrow.html( $(this).is(':visible') ? 'amp;#8593;' : 'amp;#8595;' );
        //  inside the .html statement is a simple `inline if` statement that simply says:
        //      if true ? do this : else do this
    });
});

Пример

За show

Простой код:

 $(".articleTitle").click(function () {
    var a = $(this).find(".articleArrow");
    $(this).siblings(".articleContent").slideToggle("slow", function () {
        a.html($(this).is(":visible") ? "amp;#8593;" : "amp;#8595;")
    })
});

Комментарии:

1. Спасибо, узнал что-то новое! Я новичок в jQuery, но, если я правильно понимаю, проверка ‘:visible’ — это просто то, что возвращает true (если оно, конечно, видно). Но я мог бы заменить это просто на «true» или что-нибудь еще, что возвращает true? Видимая проверка не служит никакой другой цели здесь, нет?

2. @Juicy видимая проверка здесь служит для определения, является ли элемент переключаемым открытым или закрытым. Если он закрыт, то он не виден. Вы могли бы заменить его чем угодно, но я не уверен, как что-то еще будет соответствовать тому, чего вы хотите достичь здесь?