javascript - 2 番目のハンドラーはトグル イベント内で実行できません

Question

トグルを使用して単純な表示/非表示ボックスを作成しようとしましたが、ボックスが開いているとボタンが「-」に変わり、ボックスが閉じているとボタンが「+」に戻ります

ここで私のjsfiddleを確認できます

最初と2番目のハンドラーを使用してこのコードを試します

$(document).ready(function () {
    //default
    $('.content').hide();

    $('#b_1').click(function () {

        $('.content').toggle(function () {
            $('#b_1').prop('value', '-');    //first handler
        },
            function() {
            $('#b_1').prop('value', '+');    //second handler
        });

    });
});

しかし、2番目のハンドラーが機能していません..

Answer 1

..で2番目のハンドラーを使用している人を見toggleたことがありますが、トグル関数に2番目のハンドラーがないことを知っています..ドキュメントを確認してください..（間違っている場合はお知らせください）..その場合toggle-event、jQueryでは非推奨です1.8 で削除され、jQuery 1.9 で削除されました。

とにかく、ここに私があなたの問題を解決する方法があります

$('#b_1').click(function () {

 $('.content').toggle('slow',function () {
     if($('.content').is(':visible')){
        $('#b_1').attr('value', '-');
     }else{
        $('#b_1').attr('value', '+');
     }
 });
 });  

ここで働くフィドル

Answer 2

toggle()手動で処理する方がよいでしょう。

$('#b_1').click(function () {

    var $button = $(this);
    $('.content').toggle(function () {
        var symbol = $button.attr("value"),
            newSymbol = symbol == "+" ? "-" : "+";

        $button.attr("value", newSymbol);
    });

});

JSFiddle。

Answer 3

試す

<script type="text/javascript">

    $(function()
    {
        $('.content').hide();

        $('#b_1').toggle(function ()
        {
            $(this).attr('value', '-');
            $(this).next('.content').show();
        },
        function()
        {
            $(this).attr('value', '+');
            $(this).next('.content').hide();
        });

    });

</script>

Answer 4

これを試すことができます：フィドル

$(document).ready(function () {
    var i = 0;
    $('.content').hide();
    $('#b_1').click(function () {
        if (i == 0) {
            $('.content').toggle('slow', function () {
                $('#b_1').val('-');
                i = 1;
            });
        } else if (i = 1) {
            $('.content').toggle('slow', function () {
                $('#b_1').val('+');
                i = 0;
            });
        }
    });
});