0

私はこのコードを持っています:

$(document).ready(function() { //Document Ready

$(".examples .example1").click(function() {

    $(".examples .example1 div").fadeToggle("slow");
    $(".examples .example1").toggleClass('focused');

});


$(".examples .example2").click(function() {

    $(".examples .example2 div").fadeToggle("slow");
    $(".examples .example2").toggleClass('focused');

});


$(".examples .example3").click(function() {

    $(".examples .example3 div").fadeToggle("slow");
    $(".examples .example3").toggleClass('focused');


});

}); // End

これは基本的に、3 つの異なる要素 (以下の例では 2 つだけ) で同じことを複製するだけです。クリック、div の切り替え、およびクラスの切り替えです。

ここに作業コード(サイトに表示されているように醜く、他の css/less と画像がありません)

これは完全に機能しますが、私の (非常に小さい) JS 担当者は、同じことを行うためのよりクリーンな方法があるに違いないと言っています。繰り返しが多すぎて醜いようです。

誰かがこのより良いコードを作るのを助けることができますか? （したがって、私が学べば、より良いコーダーになります）

4

2 に答える 2

1 
$(document).ready(function() { //Document Ready
   $('.examples > span[class^="example"]').click(function() {
      $(this).toggleClass('focused').children('div').fadeToggle('slow');
   });
}); // End

.examplesで始まるクラス名の場合、これはスパンの子をターゲットにしますexample。focusedこの要素のクラスを切り替えてから、子divを見つけてゆっくりと切り替えます。

Codepen リンク: http://codepen.io/anon/pen/DBHFy

于 2013-06-17T15:12:25.997 に答える