Question

这些是我的代码的摘录

<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之间切换！和Unhook！

问题出在这里

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

此处这个条件永远不会通过控制台日志打印Hook It！

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

Answer 1

问题是第一个如果满足条件然后内容变为Unhook，那么第二个满足，因为内容由第一个条件改变，现在第二个块执行将html更改回{ {1}}

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!');
    }
});

Answer 2

一个简单的三元运算符应该可以解决问题。

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

JSFIDDLE

您的代码存在的问题是您正在更新文本值，然后再次检查它，还原您的更改。

Answer 3

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

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

尝试以上方法。你真的在处理文本 - 而不是HTML。第二个条件也应该是其他条件

Answer 4

$("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!');
                    }


                    });

Answer 5

答案是您的按钮设置为取消挂钩！在你检查解开之前！并改变它钩住它！因为您使用了两个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!');
                }
         });

Answer 6

请考虑一下：

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元素之前，你应该看this。

Answer 7

讨厌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!');    
});

Jquery html（）里面有条件检查

7 个答案: