0

以下をループに入れる方法を見つけようとしていますが、あまり運がありません。

  $('#start_01_trigger').mouseover(function() {
    $('#start_01').css( "color", "#FFF" );
    $('#start_01_trigger').fadeTo("100", 0.4);
  });
  $('#start_01_trigger').mouseout(function() {
    $('#start_01').css( "color", "#68C3AD" );
    $('#start_01_trigger').fadeTo("100", 0);
  });

これはカレンダー アプリ用なので、31 回繰り返す必要があります。

キッカーは、これを構築するために Tumult Hype を使用していて、要素にクラスを割り当てることができないことです。ID のみを割り当てることができ、それぞれが一意です。

これが上記のループの最初の繰り返しで、2 回目は次のようになります。

  $('#start_02_trigger').mouseover(function() {
    $('#start_02').css( "color", "#FFF" );
    $('#start_02_trigger').fadeTo("100", 0.4);
  });
  $('#start_02_trigger').mouseout(function() {
    $('#start_02').css( "color", "#68C3AD" );
    $('#start_02_trigger').fadeTo("100", 0);
  });

ID の番号だけが変更され、他には何も変更されていないことがわかります。

4

1 に答える 1

1

属性セレクターを使用して、一般的なイベント ハンドラーを作成できます。

$('div[id^="start_"][id$="_trigger"]').mouseover(function() {
    var $elem = $('#' + this.id.replace('_trigger', ''));

    $elem.css('color', 'red');
    $(this).fadeTo('100', 0);
});
  • [id^="start_"]id属性が で始まる場合にのみ一致しstart_ます。
  • [id$="_trigger"]id属性が で終わる場合にのみ一致しstart_ます。
  • したがって、最終的には、id属性がこれら 2 つの値で開始および終了する要素に一致します。
于 2013-04-03T03:18:40.157 に答える