Jquery html(） 在条件检查中

Jquery html() inside conditional check

本文关键字：条件 检查 html Jquery      更新时间：2023-09-26

这些是我的代码的摘录

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

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

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

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

吉斯菲德尔

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

请考虑这一点：

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

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

答案是你的按钮被设置为解开！ 在你检查之前解开！ 并把它改成钩子！ 因为你用了两个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!');
    }
});

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

尝试上述操作。你真正处理的是文本 - 而不是html。第二个条件也应该是 else

$("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!');
    }
});
相关文章：