1

I'm making a very simple pop up where I can choose from 8 types of content, all using the same format. It works by clicking on hidden divs that show on hover on the top section, of course as you can see I came up with a very long and large code for something that can probably be done with much less bolts and wires.

Since it's a lot of lines I pasted all this in jsFiddle

Is there a way to make this lighter?

SOLVED... Yeees!

Thanks to all... here is the final script: jsFiddle Final in case someone else has the same difficulty

4

3 に答える 3

1

コードを減らすためにできることが3つあります。

  • ホバーショートカットを使用する
  • 匿名関数を使用する
  • パラメータ化された関数を使用する

まず、jQueryには、hoverマウスオーバー/マウスアウトの動作を置き換えるメソッドがあります。

$('#scrollbtnR8').bind('mouseover', R8);
$('#scrollbtnR8').bind('mouseout', R8b);

として置き換えることができます

$('#scrollbtnR8').hover(R8, R8b);

それは少し少ないコードですが:)

次に、各イベントハンドラーの関数を定義していますが、これらの関数を使用しているのは1回だけです。それらを1回だけ使用する場合は、次のような匿名関数を作成できます。

$('#scrollbtnR1').bind('click', esta1);

になります

$('#scrollbtnR1').click(function() { 
    $("#scrollcontrol").animate({"left":-240},500, "swing", null);
});

最後に、関数を使用して、コードの共通部分をカプセル化し、変更部分をパラメーターとして渡すことができます。

次のように実装できます。

<div id="scrollcontrol" animate="swing" swingLeft="-240">

$('div[animate='swing']').click(function() { 
    $(this).animate({"left": $(this).attr("swingLeft")}, 500, "swing", null);
});

「div」セレクターは、AttributeEqualsSelectorを使用します。また、すべての「アニメーション」divにクラスを割り当て、クラスセレクターを使用してそれらを選択することもできます。$("div.animate")これにより、すべてが選択されます<div class="animate">。

ここで何が起こるかです：

  • animate属性の値が「swing」であるすべてのdivを選択します。
  • jQueryのswinganimateを呼び出します$(this).attr("swingLeft")が、左側のプロパティとして使用します。

attr("wingLeft")HTMLマークアップで定義されているswingLeftプロパティの値を取得します。

この時点でコードを見るのをやめました。重要なのは次のとおりです。実行するコードを見て、一般化できるパターンに気付くかどうかを確認します。その後、コードをさらに単純化することができます。
また、注目に値するのは、「animate」、「swingLeft」などのプロパティをHTMLに追加することを好まない人もいます。更新pimvdbのコメントによると、jQueryデータを使用して少し「クリーン」にすることができます。

その場合、コードは次のようになります。

<div id="scrollcontrol" class="swing" data-swingLeft="-240">

$('.swing').click(function() { 
    $(this).animate({"left": $(this).data("swingLeft")}, 500, "swing", null);
});
于 2012-10-08T15:18:21.470 に答える
1

繰り返されるすべての動作を関数にリファクタリングしてから、さまざまな部分をパラメーターとして渡します。例：次のようになります。

function esta1(event) {
    $("#scrollcontrol").animate({"left":-240},500, "swing", null);
}
function esta2(event) {
    $("#scrollcontrol").animate({"left":0},500, "swing", null);
}
...
$('#scrollbtnR1').bind('click', esta1);
$('#scrollbtnL2').bind('click', esta2);

これになります：

function functionName(event, left) {
    $("#scrollcontrol").animate({"left": left},500, "swing", null);
}
$('#scrollbtnR1').bind('click', function (e) {
    functionName(e, -240);
});
$('#scrollbtnL2').bind('click', function (e) {
    functionName(e, 0);
});

単一のジェネリック関数が残り、他のすべてがその関数にパラメーターを渡すまで、このリファクタリングプロセスを続けます。

パラメータリストが長くなり、扱いにくい場合は、代わりにパラメータオブジェクトを渡すことを検討してください。

function functionName(event, params) {
    $("#scrollcontrol").animate({"left": params.left}, 
        params.duration, 
        params.animation, null);
}
$('#scrollbtnR1').bind('click', function (e) {
    functionName(e, { left: -240, duration: 500, animation: "swing" });
});
于 2012-10-08T15:13:33.457 に答える
1

まず、IDですべてを参照するのをやめます。次のようなクラスを使用します。

$('.scrollbtn').hover(function(){
         $(this).css("opacity","0")
             .animate({"opacity":1},500, "linear");
    }, function() {
        $(this).css("opacity","1")
             .animate({"opacity":0},500, "linear");
    });
于 2012-10-08T15:13:40.477 に答える