0

私はjqueryソースを作成しました...サブメニューにマウスを合わせると、メインメニューにクラス（オン）が追加されます....

コードは以下のようなものです......

$('#gnbMenu .subM1').hover(function() {
      $('#gnbMenu .m1').toggleClass('on');
    });
    $('#gnbMenu .subM2').hover(function() {
      $('#gnbMenu .m2').toggleClass('on');
    });
    $('#gnbMenu .subM3').hover(function() {
      $('#gnbMenu .m3').toggleClass('on');
    });
    $('#gnbMenu .subM4').hover(function() {
      $('#gnbMenu .m4').toggleClass('on');
    });
    $('#gnbMenu .subM5').hover(function() {
      $('#gnbMenu .m5').toggleClass('on');
    });
    $('#gnbMenu .subM6').hover(function() {
      $('#gnbMenu .m6').toggleClass('on');
    });

このスクリプトは少し見にくいと思います。もっとシンプルできれいにする方法はありますか?

4

5 に答える 5

1

試す

$('#gnbMenu [class*="subM"]').hover(function(){
    $('#gnbMenu .m' + this.className.match(/subM(\d+)/)[1]).toggleClass('on');
})
于 2013-09-17T05:49:45.760 に答える
1

それらすべてに単一のクラスを与えます（たとえば、subMGeneral）。

data-2 番目のクラス名の属性を追加します。

例えば<span class='subM1 subMGeneral' data-class='m1'>

それからあなたはそれをすべてに変えることができます

$('#gnbMenu .subMGeneral').hover(function() {
  $('#gnbMenu .' + $(this).data('class')).toggleClass('on');
});

HTML を見ると、より多くの洞察が得られる場合があります。

于 2013-09-17T05:49:47.083 に答える
1

1、2、3 のようにサブメニューに値を割り当てます。次に、すべてのサブメニューに共通のクラスを作成します (例: subM)

次に、以下のようにコードを変更します

 $('#gnbMenu .subM').hover(function() {
  $('#gnbMenu .m'+$(this).val()).toggleClass('on');
});
于 2013-09-17T05:53:18.333 に答える
1

代わりに CSS を使用してください。

#gnbMenu a:hover {
  background-color: red;
}

「ホバー」JavaScript イベントは、タッチ スクリーン ブラウザではうまく機能しないため、絶対に使用しないでください。

于 2013-09-17T05:46:28.260 に答える
1

このロジックを関数でラップし、1 つのライナーとして呼び出します。

function MyFunction(hoverSelector,toggleSelector){
 $(hoverSelector).hover(function() {
      $(toggleSelector).toggleClass('on');
    });
 }
于 2013-09-17T05:47:03.510 に答える