条件检查中的 Jquery html()答案

【问题标题】：Jquery html() inside conditional check条件检查中的 Jquery html()
【发布时间】：2013-10-01 04:24:36
【问题描述】：

这些是我的代码的摘录

<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());

【问题讨论】：

你应该使用else if，把else放在第二个if之前
Button text toggle in jquery 的可能重复项

标签： javascript jquery html dom

【解决方案1】：

问题是第一个如果条件满足然后内容更改为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!';
    });
});

【讨论】：

【解决方案2】：

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

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

JSFIDDLE

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

【讨论】：

【解决方案3】：

请考虑一下：

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。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案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!');
    }
});

【讨论】：

【解决方案6】：

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

试试上面的。你真的在处理文本 - 而不是 html。第二个条件也应该是 else

【讨论】：

【解决方案7】：

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

【讨论】：