2

私は次のコードを持っています：

HTML：

<input type='text' class='a' />
<div class='inst' tag='a'></div>
<input type='text' class='b' />
<div class='inst' tag='b'></div>
<input type='text' class='c' />
<div class='inst' tag='c'></div>

JS：

$(function() {
    $('.inst').click(function() {
        alert($(this).attr('tag') + ' clicked');
    });

    $('[type=text]').focus(function() {
       show_inst($(this).attr('class'));
    }).blur(function() {
       //hide_inst($(this).attr('class'));
    });

    function show_inst(tag) {
        $('div.inst[tag=' + tag + ']').html(tag + ' instructions');
    }

    function hide_inst(tag) {
        $('div.inst[tag=' + tag + ']').html('');
    }
});

CSS：

.inst {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    cursor: pointer;
}

正常に動作します。instクリックするとアラートメッセージが表示され、入力がフォーカスされると指示が表示されます。

今、私は関連性のない命令がぼかしで消えることを望みます。そこで、コメント行をに追加してみましたblur()。最初に呼び出されて命令が削除されるため、そのようには機能しませんblur()。したがって、命令をクリックしても何も起こりません。

どうすればこれを解決できますか？

4

2 に答える 2

3

クリックが発行される前に命令が非表示になることが唯一の問題である場合は、わずかな遅延を追加することを検討してください。これにより、基本的に、クリックが処理された後に非表示命令が実行されます。

このようなもの：

$('[type=text]').focus(function() {
   show_inst($(this).attr('class'));
}).blur(function() {
   setTimeout(function(){
     hide_inst($(this).attr('class'));
   }, 50); // make this happen after any other events
});
于 2010-08-02T11:22:47.127 に答える
1 
        var timeoutId;
        $('[type=text]').on("blur", function(){
            timeoutId = setTimeout(function(){                     
                console.log("blur");
            }, 50);
        }).on("focus", function(){
            clearTimeout(timeoutId);
        });

または、これを試すことができます。入力を終了した場合にのみブラーが発生します（「false」クリックはclearTimeoutによって削除されます）。

于 2012-05-29T11:11:15.317 に答える