これら2つのコードブロックを単純化する方法は?

$(".button-wrap.enter-now").click(isMobile ?
    function(){
        window.location = 'form/form.html';
    }
    : function(){
        TweenMax.to($iframeBg, 0.35, {startAt:{top:0}, opacity:1 });
        TweenMax.to($("#form-wrapper"), 0.45, {top:"8%", delay:0.05, ease:Power3.easeOut, opacity:1});
});
$("#close-form").click(function(){
    TweenMax.to($("#form-wrapper"), 0.45, {opacity:0, top:"110%", ease:Power3.easeOut});
    TweenMax.to($iframeBg, 0.25, {opacity:0, delay:0.1});
    TweenMax.to($iframeBg, 0.01, {top:"120%", delay:0.45});
});

私はnon-ie8sのための上記のコードを持っています、そしてie8のために - 彼らはトゥイーンに不透明がないことを除いてまったく同じに見えます:

if(ie8){
    $(".button-wrap.enter-now").click(isMobile ?
        function(){
            window.location = 'form/form.html';
        }
        : function(){
            TweenMax.to($iframeBg, 0.35, {startAt:{top:0} });
            TweenMax.to($("#form-wrapper"), 0.45, { top:"8%", delay:0.05, ease:Power3.easeOut});
    });
    $("#close-form").click(function(){
        TweenMax.to($("#form-wrapper"), 0.45, {top:"110%", ease:Power3.easeOut});
        TweenMax.to($iframeBg, 0.25, { delay:0.1});
        TweenMax.to($iframeBg, 0.01, {top:"120%", delay:0.25});
    });
}

私はちょうど、どうすればコードを1つに単純化できますか?私は何を探したらいいのか分からない。どうもありがとう。

0
三項演算子を検索する必要があります。
追加された 著者 Danny Beckett,
@ダニー・ベケット:彼はすでにそれを使用している、またはそれを虐待私は言うだろう...
追加された 著者 elclanrs,
代わりに if..else 文を使用します。
追加された 著者 elclanrs,
さて、IMOでは、読んで理解しやすいことについてもっと詳しく説明します。簡単な表現では三項演算子は問題ありませんが、そこには7行があります。
追加された 著者 elclanrs,
@DannyBeckettあなたはx?x:x式ですか?私はこれを知っている。しかし、オブジェクトから{opacity:1}をどのように抽出できますか?
追加された 著者 Luxiyalu,
@elclanrs:どのようにそれを乱用する?ありがとう!
追加された 著者 Luxiyalu,
@elclanrs申し訳ありません私はちょうど学習を始めました、なぜ/それ以外の方が良いですか?
追加された 著者 Luxiyalu,
@elclanrs申し訳ありません私はちょうど学習を始めました、なぜ/それ以外の方が良いですか?
追加された 著者 Luxiyalu,
右@elclanrs。ありがとう。
追加された 著者 Luxiyalu,
右@elclanrs。ありがとう。
追加された 著者 Luxiyalu,

8 答え

不透明度を if-else ステートメントにカプセル化するだけではどうでしょうか。

$(".button-wrap.enter-now").click(isMobile ? function(){
        window.location = 'form/form.html';
    }
    : function(){
        TweenMax.to($iframeBg, 0.35, {startAt:{top:0}, opacity:1 });
        TweenMax.to($("#form-wrapper"), 0.45, {top:"8%", delay:0.05, ease:Power3.easeOut, opacity:1});
});

$("#close-form").click(function(){
    TweenMax.to($("#form-wrapper"), 0.45, {opacity:0, top:"110%", ease:Power3.easeOut}); 
    if(ie8){
        TweenMax.to($iframeBg, 0.25, {delay:0.1});
    }else{
        TweenMax.to($iframeBg, 0.25, {opacity:0, delay:0.1});
    }
    TweenMax.to($iframeBg, 0.01, {top:"120%", delay:0.45});
});
0
追加された

不透明度を if-else ステートメントにカプセル化するだけではどうでしょうか。

$(".button-wrap.enter-now").click(isMobile ? function(){
        window.location = 'form/form.html';
    }
    : function(){
        TweenMax.to($iframeBg, 0.35, {startAt:{top:0}, opacity:1 });
        TweenMax.to($("#form-wrapper"), 0.45, {top:"8%", delay:0.05, ease:Power3.easeOut, opacity:1});
});

$("#close-form").click(function(){
    TweenMax.to($("#form-wrapper"), 0.45, {opacity:0, top:"110%", ease:Power3.easeOut}); 
    if(ie8){
        TweenMax.to($iframeBg, 0.25, {delay:0.1});
    }else{
        TweenMax.to($iframeBg, 0.25, {opacity:0, delay:0.1});
    }
    TweenMax.to($iframeBg, 0.01, {top:"120%", delay:0.45});
});
0
追加された

不透明度を if-else ステートメントにカプセル化するだけではどうでしょうか。

$(".button-wrap.enter-now").click(isMobile ? function(){
        window.location = 'form/form.html';
    }
    : function(){
        TweenMax.to($iframeBg, 0.35, {startAt:{top:0}, opacity:1 });
        TweenMax.to($("#form-wrapper"), 0.45, {top:"8%", delay:0.05, ease:Power3.easeOut, opacity:1});
});

$("#close-form").click(function(){
    TweenMax.to($("#form-wrapper"), 0.45, {opacity:0, top:"110%", ease:Power3.easeOut}); 
    if(ie8){
        TweenMax.to($iframeBg, 0.25, {delay:0.1});
    }else{
        TweenMax.to($iframeBg, 0.25, {opacity:0, delay:0.1});
    }
    TweenMax.to($iframeBg, 0.01, {top:"120%", delay:0.45});
});
0
追加された

コード内のパターンを探し、並べ替えるだけです。たとえば、クリックリスナを持つ要素が1つあります。それを一度やりなさい。あなたは一度クリックすると、同じモバイルチェックがあります。それを一度やりなさい。したがって、あなたの .button-wrap.enter-now のために、次のような機能を持つことができます:

$(".button-wrap.enter-now").click(function(){
  if(isMobile){
    window.location = 'form/form.html';
  }else if(ie8){
    TweenMax.to($iframeBg, 0.35, {startAt:{top:0} });
    TweenMax.to($("#form-wrapper"), 0.45, { top:"8%", delay:0.05, ease:Power3.easeOut});
  }else{
    TweenMax.to($iframeBg, 0.35, {startAt:{top:0}, opacity:1 });
    TweenMax.to($("#form-wrapper"), 0.45, {top:"8%", delay:0.05, ease:Power3.easeOut, opacity:1});
  }
});

また、それらの TweenMax を組み合わせることもできますが、もっとシンプルにしたいと思っていました。これで、あなたの#クローズフォームクリックハンドラでも同じことができるはずです。

0
追加された

コード内のパターンを探し、並べ替えるだけです。たとえば、クリックリスナを持つ要素が1つあります。それを一度やりなさい。あなたは一度クリックすると、同じモバイルチェックがあります。それを一度やりなさい。したがって、あなたの .button-wrap.enter-now のために、次のような機能を持つことができます:

$(".button-wrap.enter-now").click(function(){
  if(isMobile){
    window.location = 'form/form.html';
  }else if(ie8){
    TweenMax.to($iframeBg, 0.35, {startAt:{top:0} });
    TweenMax.to($("#form-wrapper"), 0.45, { top:"8%", delay:0.05, ease:Power3.easeOut});
  }else{
    TweenMax.to($iframeBg, 0.35, {startAt:{top:0}, opacity:1 });
    TweenMax.to($("#form-wrapper"), 0.45, {top:"8%", delay:0.05, ease:Power3.easeOut, opacity:1});
  }
});

また、それらの TweenMax を組み合わせることもできますが、もっとシンプルにしたいと思っていました。これで、あなたの#クローズフォームクリックハンドラでも同じことができるはずです。

0
追加された

IE8が検出された場合、オブジェクトを保持するために変数を使用し、不透明度を設定するだけです。

$(".button-wrap.enter-now").click(isMobile ?
    function(){
        window.location = 'form/form.html';
    }
    : function(){
        var attrA = {startAt:{top:0}};
        var attrB = {top:"8%", delay:0.05, ease:Power3.easeOut};
        if (ie8 /* In case ie8 is not working for you: $.browser.msie  && parseInt($.browser.version, 10) === 8*/) {
            attrA.opacity = 1;
            attrB.opacity = 1;
        }
        TweenMax.to($iframeBg, 0.35, attrA);
        TweenMax.to($("#form-wrapper"), 0.45, attrB);
});
$("#close-form").click(function(){
    var attrA = {top:"110%", ease:Power3.easeOut};
    var attrB = {delay:0.1};
    if (ie8) {
        attrA.opacity = 0;
        attrB.opacity = 0;
    }
    TweenMax.to($("#form-wrapper"), 0.45, attrA);
    TweenMax.to($iframeBg, 0.25, attrB);
    TweenMax.to($iframeBg, 0.01, {top:"120%", delay:0.45});
});
0
追加された

IE8が検出された場合、オブジェクトを保持するために変数を使用し、不透明度を設定するだけです。

$(".button-wrap.enter-now").click(isMobile ?
    function(){
        window.location = 'form/form.html';
    }
    : function(){
        var attrA = {startAt:{top:0}};
        var attrB = {top:"8%", delay:0.05, ease:Power3.easeOut};
        if (ie8 /* In case ie8 is not working for you: $.browser.msie  && parseInt($.browser.version, 10) === 8*/) {
            attrA.opacity = 1;
            attrB.opacity = 1;
        }
        TweenMax.to($iframeBg, 0.35, attrA);
        TweenMax.to($("#form-wrapper"), 0.45, attrB);
});
$("#close-form").click(function(){
    var attrA = {top:"110%", ease:Power3.easeOut};
    var attrB = {delay:0.1};
    if (ie8) {
        attrA.opacity = 0;
        attrB.opacity = 0;
    }
    TweenMax.to($("#form-wrapper"), 0.45, attrA);
    TweenMax.to($iframeBg, 0.25, attrB);
    TweenMax.to($iframeBg, 0.01, {top:"120%", delay:0.45});
});
0
追加された

IE8が検出された場合、オブジェクトを保持するために変数を使用し、不透明度を設定するだけです。

$(".button-wrap.enter-now").click(isMobile ?
    function(){
        window.location = 'form/form.html';
    }
    : function(){
        var attrA = {startAt:{top:0}};
        var attrB = {top:"8%", delay:0.05, ease:Power3.easeOut};
        if (ie8 /* In case ie8 is not working for you: $.browser.msie  && parseInt($.browser.version, 10) === 8*/) {
            attrA.opacity = 1;
            attrB.opacity = 1;
        }
        TweenMax.to($iframeBg, 0.35, attrA);
        TweenMax.to($("#form-wrapper"), 0.45, attrB);
});
$("#close-form").click(function(){
    var attrA = {top:"110%", ease:Power3.easeOut};
    var attrB = {delay:0.1};
    if (ie8) {
        attrA.opacity = 0;
        attrB.opacity = 0;
    }
    TweenMax.to($("#form-wrapper"), 0.45, attrA);
    TweenMax.to($iframeBg, 0.25, attrB);
    TweenMax.to($iframeBg, 0.01, {top:"120%", delay:0.45});
});
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript