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

7 回答 7

1

问题是第一个 if 条件满足然后内容更改为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!';
    });
});
于 2013-10-01T04:27:13.507 回答
1

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

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

JSFIDDLE

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

于 2013-10-01T04:33:23.507 回答
0 
if ($(this).text() == 'Hook It!') {
    $(this).text('Unhook!');
} else if ($(this).text() == 'Unhook!') {
    $(this).text('Hook It!');
}

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

于 2013-10-01T04:26:23.260 回答
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!');
    }
});
于 2013-10-01T04:30:10.380 回答
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!');
    }
});
于 2013-10-01T04:32:03.527 回答
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 元素之前，你应该看看这个。

于 2013-10-01T04:39:10.790 回答
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!');    
});
于 2013-10-01T05:03:37.117 回答