0

フォーカスを失った後、またはぼかした後、divを非表示にしようとしています。私はシンプルなフォームを持っており、タッチまたはクリックのいずれかでフィールドに焦点を当てるときにユーザーにいくつかのガイドラインを提供しています（これはモバイル用のサイトです）。表示したいとおりに機能していますが、フィールドをもう一度クリックして、divを再び非表示にする必要があります。

HTML：

 <input type="text" id="usernameCL" name="usernameCL" placeholder="Create a Username" autocomplete="off" autocorrect="off" class="field_hints"/>
<div id="usernameCL" class="tooltip_static" style="display:none"> This be my field hint</div>

これは私の他のフィールドのヒントです

1.6.4 JQを使用したJQuery関数：

$().ready(function () {
    $('.field_hints').bind('focus',
     function()
     {
       var field = this.id;
       var div = $('.tooltip_static[id='+field+']');

       if(div.css('display') == 'none')
       {
         div.show(function()
         {
           div.slideUp("fast");
         });
       }
      else
      {
        div.hide('blur');
      }
    });
  });

そしてここにフィドルがあります：http： //jsfiddle.net/LapPA/

これをぼかしやマウスアウトで非表示にする方法を知っている人はいますか？

4

4 に答える 4

2 
 $('#myformid').on('blur', '.field_hints',function(){
     $(this).next('.tooltip_static').hide();
 }); //replace #myformid with the id of your form
于 2013-02-04T20:51:15.457 に答える
1

mouseleaveイベントを使用できます：http： //jsfiddle.net/4VUvD/

$().ready(function () {
      $('.field_hints').bind('focus', function() {
          var field = this.id;
          var div = $('.tooltip_static[id='+field+']');
          div.slideDown("fast");
      }).bind('mouseleave', function(){
          $('.tooltip_static[id='+this.id+']').slideUp("fast");
      });
});
于 2013-02-04T20:54:51.283 に答える
1

blurイベントにバインドされた別のハンドラーが必要です。

たとえば、これを行うことができます：

$().ready(function () {
  $('.field_hints').bind('focus',
    function()
    {
      var field = this.id;
      var div = $('.tooltip_static[id='+field+']');

      if(div.css('display') == 'none')
      {
        div.hide(function()
        {
          div.slideDown("fast");
        });
      }
    }).bind('blur', 
        function()
        {
            var field = this.id;
            var div = $('.tooltip_static[id='+field+']');
            div.hide();
        });
  });
于 2013-02-04T20:52:33.360 に答える
0

まず、同じIDを持つ2つのオブジェクトがありますusernameCL。これは良くない。

あなたが探しているコード：

var func = function () {
    // We assume the id of the input tag to be #someid, and the tooltip div to be #someid_tooltip
    var id = $(this).attr('id');
    $('#' + id + '_tooltip').fadeOut();
};

$('#usernameCL').bind('blur', func);
$('#usernameCL').bind('mouseout', func);

名前をめちゃくちゃにしたのかもしれません。

于 2013-02-04T20:54:03.377 に答える