JQuery HTML () внутри условной проверки

Question

JQuery HTML () внутри условной проверки

0

это извлечение моего кода

<button>Hook It!</button>

и немного JQuery

$("ul li .tag_detail button").on('click',function(){


                    console.log($(this).html());
                    if($(this).html() == 'Hook It!'){                                       
                    $(this).html('Unhook!');
                    }

                    if($(this).html() == 'Unhook!'){                    
                    $(this).html('Hook It!');
                    }


                    });

Теперь, поскольку вы можете видеть, что мне нужен эффект переключения, т.е. когда я нажимаю кнопку, он должен переключаться между Hook It! и Отклонили !.

Проблема здесь

if($(this).html() == 'Hook It!')

здесь это условие никогда не проходит, пока распечатывает консольные журналы Hook It!

console.log($(this).html());

Wanna_be_Coder 01 окт. 2013, в 06:54

Источник

1

Вы должны использовать else if , поставить else до второго, if
Cԃաԃ 01 окт. 2013, в 04:26
0

возможный дубликат переключателя текста кнопки в jquery
undefined 01 окт. 2013, в 04:28

Теги:

javascript

jquery

html

dom

7 ответов

1

Тройной оператор должен сделать трюк.

 $("ul li .tag_detail button").on('click',function(){
     var ths = $(this);
     ths.html(ths.html() == 'Hook It!' ? 'Unhook!' : 'Hook It!');
 });

JSFIDDLE

Проблема с вашим кодом заключается в том, что вы обновляете текстовое значение, а затем проверяете его снова, возвращая свои изменения.

bluetoft 01 окт. 2013, в 03:05

0

Ненавидеть, if заявления? Это альтернатива:

<button class="hook">Hook it!</button>

Отдельные действия с крюком/отцеплением в отдельные функции:

$('body').on('click', '.tag_detail button', function() {
    console.log('toggling');
    $(this).toggleClass('hook unhook');
})
.on('click', '.hook', function() {
    console.log('Clicked hooked!');
    $(this).text('Unhook it!');
})
.on('click', '.unhook', function() {
    console.log('Clicked un-hooked!');
    $(this).text('Hook it!');    
});

rojoca 01 окт. 2013, в 03:16

0

Пожалуйста, учтите следующее:

JS:

$(function(){
    $('button').on('click', function() {
        if(this.innerHTML == 'Hook It')
            this.innerHTML = 'Unhook';
        else
            this.innerHTML = 'Hook It';
    });
});

HTML:

<script src="http://code.jquery.com/jquery-git2.js"></script>
<meta charset=utf-8 />
<button>Hook It

Скрипт здесь: http://jsbin.com/dadjj/1/edit?js,output.

Совету, прежде чем жаловаться на недостающие элементы html, вы должны посмотреть это.

Esteban 01 окт. 2013, в 03:00

0

                  if($(this).text() == 'Hook It!'){                                       
                    $(this).text('Unhook!');
                  }

                  else if($(this).text() == 'Unhook!'){                    
                    $(this).text('Hook It!');
                  }

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

TGH 01 окт. 2013, в 01:58

0

Ответ: ваша кнопка настроена на отцепление! прежде чем вы проверяете отцепку! и изменил его, чтобы зацепить его! потому что вы использовали два, if вместо, if else так...

См. Фиксированный код

         $("ul li .tag_detail button").on('click',function(){

                if($(this).html() == 'Hook It!'){                                       
                    $(this).html('Unhook!');
                }
                // change it to else if
                else if($(this).html() == 'Unhook!'){                    
                    $(this).html('Hook It!');
                }
          });

или вы можете просто...

         $("ul li .tag_detail button").on('click',function(){

                if($(this).html() == 'Hook It!'){                                       
                    $(this).html('Unhook!');
                } else {                 
                    $(this).html('Hook It!');
                }
         });

Chokchai 01 окт. 2013, в 01:57

0

$("ul li .tag_detail button").on('click',function(){


                    console.log($(this).html());
                    if($(this).html() == 'Hook It!'){                                       
                    $(this).html('Unhook!');
                    }else{                    
                    $(this).html('Hook It!');
                    }


                    });

Shashank 01 окт. 2013, в 01:32

Ещё вопросы

Вы должны использовать else if , поставить else до второго, if
возможный дубликат переключателя текста кнопки в jquery

Arun P Johny · Accepted Answer · 2013-10-01T02-58-00.000Z

Проблема заключается в первом условии, если условие выполняется, тогда контент изменяется на Unhook, тогда второй выполняется, потому что содержимое изменяется первым условием, теперь второй блок выполняет изменение html обратно в Hook It

$("ul li .tag_detail button").on('click', function () {
    var text = $(this).text();
    console.log(text);
    if (text == 'Hook It!') {
        $(this).html('Unhook!');
    } else if (text == 'Unhook!') {
        $(this).html('Hook It!');
    }
});

другая версия может быть

$("ul li .tag_detail button").on('click', function () {
    $(this).text(function(idx, text){
        return text == 'Hook It!' ? 'Unhook!' : 'Hook It!';
    });
});

спасибо большое, это была моя глупая ошибка