0

IDごとにいくつかのホットスポットがあります。ID固有のホットスポットは、マウスオーバーで領域（＃ID-ed textarea）を表示し、マウスアウトでテキスト領域を非表示にします（CSS表示：非表示は非表示よりも著しく高速であることに注意してください）。約50個持っています。私はこれを逐語的に書きました-別名、すべての人のための関数。

これを行うためのより良い、より賢明で、効率的で、より短い方法を学びたいと思います。

    //// POP 1_1
$('#pop_01_01').hover(
    function() {
    $('#text_01_01.textarea').fadeIn('fast');          
    },
    function() {
    $('#text_01_01.textarea').css({'display':'none'});
    }
);
//// POP 02_01
$('#pop_02_01').hover(
    function() {
    $('#text_02_01.textarea').fadeIn('fast');          
    },
    function() {
    $('#text_02_01.textarea').css({'display':'none'});
    }
);
//// POP 02_01
$('#pop_02_02').hover(
    function() {
    $('#text_02_02.textarea').fadeIn('fast');          
    },
    function() {
    $('#text_02_02.textarea').css({'display':'none'});
    }
);
//// POP 02_03
$('#pop_02_03').hover(
    function() {
    $('#text_02_03.textarea').fadeIn('fast');          
    },
    function() {
    $('#text_02_03.textarea').css({'display':'none'});
    }
);
4

6 に答える 6

2

次のことができます。

  1. この動作をするすべてのオブジェクトを1つのjQueryセレクターに結合して、すべて同じコードを実行できるようにします。
  2. とにかくIDがunqiueであるため、セレクターからを削除しtextareaます。これは不要であり、IDがないと高速になるはずです。
  3. ホバーされているオブジェクトのIDから必要なIDを抽出し、終了文字を取得して、それを使用して必要な他のIDを作成できるようにします。
  4. 組み込みのショートカットとしてでは.hide()なく使用してください。.css({'display':'none'});

結果のコード：

$('#pop_01_01, #pop_02_01, #pop_02_02').hover(
    function() {$('#text_' + this.id.substr(-5)).fadeIn('fast');},
    function() {$('#text_' + this.id.substr(-5)).hide();}
);
于 2013-03-05T22:37:01.073 に答える
1

次のような関数を使用します。

function makehover(myid)
{
  $('#pop'+myid).hover(
      function() {
      $('#text'+myid+'.textarea').fadeIn('fast');          
      },
      function() {
      $('#text'+myid+'.textarea').css({'display':'none'});
      }
  );

その後、電話

 makehover('_01_01');
 makehover('_02_01');
 makehover('_02_02');

またはjQuery経由で呼び出す

 $.each(['_01_01','_02_01','_02_02'],function (a,b) { makehover(b); });

または（1.6+ javascript）経由で呼び出す

 ['_01_01','_02_01','_02_02'].map(function (a) { makehover(a); return a; });

等

于 2013-03-05T22:30:50.620 に答える
1

jqueryの方法でそれを実行したい場合は、次のことを考慮してください。

$.fn.makeHover = function() {
    this.each(function() {
        var $el = $(this),
            $textarea = $el.find('textarea');

        $el.hover(
            function() {
                $textarea.fadeIn('fast');
            },
            function() {
                $textarea.hide();
            }
        );
    });
};

$('#pop_01_01, #pop_02_01, #pop_02_02, #pop_02_03').makeHover();

ちなみに、私はキャッシュも行って$elおり$textarea、常にDOMを通過しないようにしています（パフォーマンスの向上のため）。

于 2013-03-05T22:43:44.887 に答える
1

これを行う最良の方法は、idではなくクラスでアイテムを参照し、関連する部分（01_01、01_02など）をidではなくdata-id属性に格納することです。

HTML -
<div class="pop" data-id="_01_01"></div>
<div class="pop" data-id="_02_01"></div>
<div class="pop" data-id="_02_02"></div>

<textarea data-id="_01_01"></textarea>
<textarea data-id="_02_01"></textarea>
<textarea data-id="_02_02"></textarea>

//// All pops
$('.pop').hover(
    function(e) {
      var dataid = $(e.target).attr("data-id");
      $('textarea[data-id="'+dataid+'"]').fadeIn('fast');
    },
    function(e) {
      var dataid = $(e.target).attr("data-id");
      $('textarea[data-id="'+dataid+'"]').hide();
    }
);

そのようなものは、すべての要素にうまく適用でき、醜い不要なIDの束を使用せず、データをクリーンに保ち、名前から分離できるはずです。

ここでフィドル-http://jsfiddle.net/fGLnB/

于 2013-03-05T22:45:33.770 に答える
0 
$('#pop_01_01, #pop_02_01, #pop_02_02').hover(
    function(){
        id = $(this).attr('id');
        $('#text'+id.substring(3,id.length)).fadeIn('fast');          
    },
    function(){
        id = $(this).attr('id');
        $('#text'+id.substring(3,id.length)).css({'display':'none'});
    }
);

IDは一意である必要があるため、「。textarea」クラスを省略しました。これにより、クラスを追加で使用する必要がなくなります。

于 2013-03-05T22:30:42.120 に答える
0

あなたは次のようなことをすることができます：

var hotspots = ['01_01','02_01','02_02'];   
hotspots.forEach(function(i) {
    $('#pop_' + i).hover(
        function() {
        $('#text_' + i + '.textarea').fadeIn('fast');          
        },
        function() {
        $('#text_' + i + '.textarea').css({'display':'none'});
        }
    );
});
于 2013-03-05T22:35:37.360 に答える