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

単純な三項演算子でうまくいくはずです。

 $("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 に答える
1

問題は、最初の条件が満たされた場合、コンテンツが に変更されることです。次に、コンテンツがUnhook最初の条件によって変更されるため、2 番目のブロックが実行され、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 に答える
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

答えは、ボタンがアンフックに設定されていることです! アンフックをチェックする前に！フックに変更しました！ifsoの代わりにtwo を使用した原因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

ヘイト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 に答える
0 
if ($(this).text() == 'Hook It!') {
    $(this).text('Unhook!');
} else if ($(this).text() == 'Unhook!') {
    $(this).text('Hook It!');
}

上記を試してください。あなたは本当にテキストを扱っています - htmlではありません。2 番目の条件も else にする必要があります

于 2013-10-01T04:26:23.260 に答える