使用Javascript - 我怎樣才能正確地縮小這個代碼

關於瀏覽器的版本中，玩家的高度應改變使用Javascript - 我怎樣才能正確地縮小這個代碼

if older then ie9 
    //height is fixed 
else 
    //height is auto

上面的代碼工作，但，這是我見過的最糟糕的事情，因爲我不重複自己一次又一次，當這條件只有一條線改變時。

<script type="text/javascript"> 
    $(document).ready(function() { 

     if ($.browser.msie && $.browser.version.substr(0,1)<9) { 
      $("#jquery_jplayer_1").jPlayer({ 
      ready: function() 
      { 
       $(this).jPlayer("setMedia", 
       { 
        m4v: "/video/videoK.mp4", 
        ogv: "/video/videoK.ogg" 
       }).jPlayer("play"); 

       $('article.about-k').hide(); 
       olark('api.box.hide'); 
      }, 
      swfPath: "/scripts/", 
      supplied: "m4v, ogv", 
      size: { 
       width: "100%", 
       height: "400px" // THE ONLY CHANGE IS HERE 
      }, 
      backgroundColor: "#fff", 
      click: function() { 
       $(this).jPlayer("play"); 
      }, 
      ended: function() { 
       $('.jplayer-k').hide(); 
       $('article.about-k').show(); 
      } 
     }) 
     } else { 
     $("#jquery_jplayer_1").jPlayer({ 
      ready: function() 
      { 
       $(this).jPlayer("setMedia", 
       { 
        m4v: "/video/videoK.mp4", 
        ogv: "/video/videoK.ogg" 
       }).jPlayer("play"); 

       $('article.about-k').hide(); 
       olark('api.box.hide'); 
      }, 
      swfPath: "/scripts/", 
      supplied: "m4v, ogv", 
      size: { 
       width: "100%", 
       height: "auto" // THE ONLY CHANGE IS HERE 
      }, 
      backgroundColor: "#fff", 
      click: function() { 
       $(this).jPlayer("play"); 
      }, 
      ended: function() { 
       $('.jplayer-k').hide(); 
       $('article.about-k').show(); 
      } 
     }) 
     } 

    }); 
</script>

正如評論所指出的那樣，唯一的改變是在一條線上。我怎樣才能重拍這個，而不是愚蠢地重複自己？

height: "auto" //THIS IS THE ONLY DIFFERENCE!

請指點

來源

2012-10-24 MEM

小題外話，但是，'$ .browser.version.substr（0,1）'將最有可能返回'1'的IE 10可能是不必要的。改用'parseInt（$。browser.version，10）'。 –

@FabrícioMatté我沒有得到如何使用：'parseInt（$。browser.version，10）<9'？瀏覽器版本少於9 ... ...沒有... :) – MEM

'if（$。browser.msie && parseInt（$。browser.version，10）<9）{''，10'只是[ radix（base）]（https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/parseInt），指定主要版本將在十進制系統中解析。 –

這是一個ternary operator很簡單：如果你

$("#jquery_jplayer_1").jPlayer({ 
    ready: function() { 
     $(this).jPlayer("setMedia", { 
      m4v: "/video/videoK.mp4", 
      ogv: "/video/videoK.ogg" 
     }).jPlayer("play"); 

     $('article.about-k').hide(); 
     olark('api.box.hide'); 
    }, 
    swfPath: "/scripts/", 
    supplied: "m4v, ogv", 
    size: { 
     width: "100%", 
     height: ($.browser.msie && $.browser.version.substr(0, 1) < 9) 
      ? "400px" 
      : "auto" 
    }, 
    backgroundColor: "#fff", 
    click: function() { 
     $(this).jPlayer("play"); 
    }, 
    ended: function() { 
     $('.jplayer-k').hide(); 
     $('article.about-k').show(); 
    } 
})

不是這樣（的例如，因爲更復雜的條件下），你仍然可以使用一個簡單的變量：

var height = "auto"; 
if (/* IE too old */) 
    height = "400px"; 
$…({ 
     … // huge config object 
     height: height, 
     … 
});

來源

2012-10-24 23:00:11 Bergi

我知道php上的三元運算符。那裏沒有問題。看起來確實是一個很好的解決方案。 – MEM

可能是這樣的：

<script type="text/javascript"> 
    $(document).ready(function() { 

     if('<?= $cookie; ?>' > '1' || $(window).width() <= 768) { 
      $('.jplayer-k').remove(); 
      $('article.about-k').show(); 
     } 
     height = $.browser.msie && parseInt($.browser.version, 10) < 9 ? '400px' : 'auto'; 
     $("#jquery_jplayer_1").jPlayer({ 
      ready: function() 
      { 
       $(this).jPlayer("setMedia", 
       { 
        m4v: "/video/videoK.mp4", 
        ogv: "/video/videoK.ogg" 
       }).jPlayer("play"); 

       $('article.about-k').hide(); 
       olark('api.box.hide'); 
      }, 
      swfPath: "/scripts/", 
      supplied: "m4v, ogv", 
      size: { 
       width: "100%", 
       height: height 
      }, 
      backgroundColor: "#fff", 
      click: function() { 
       $(this).jPlayer("play"); 
      }, 
      ended: function() { 
       $('.jplayer-k').hide(); 
       $('article.about-k').show(); 
      } 
     }) 
    }); 
</script>

UPDATE：
我加入到代碼的Fabriccio磨砂建議的上方，你的代碼不失敗，IE10

來源

2012-10-24 23:01:24 Nelson

嘗試：

var playerObj = { ready : function() { /* ... */ }, size : /* AUTO */ }; 
if (/*stupid IE TEST*/) { 
    playerObj.size.height = "..."; 
} 

$("#jquery_jplayer_1").jPlayer(playerObj);

分開你從你的流程配置，它變得更不麻煩了。

此外，像@Bergi說，三元操作：

value = (test_with_optional_parentheses) ? passed_value : failed_value;

...或在這種情況下，作爲對象參數：

{ value : (test_with_optional_parentheses) ? passed_value : failed_value };

工作得很好，用於改變一件事，內聯，在配置對象的中間。

當你開始混淆你需要處理的事情時，請牢記我的建議來組織大量的代碼。基於簡單的測試，當您需要設置單個值（一次）時，請記住Bergi的建議。

來源

2012-10-24 23:03:50 Norguard

爲什麼不：

<script type="text/javascript"> 
     $(document).ready(function() { 

      if('<?= $cookie; ?>' > '1' || $(window).width() <= 768) { 
       $('.jplayer-k').remove(); 
       $('article.about-k').show(); 
      } 

      $("#jquery_jplayer_1").jPlayer({ 
      ready: function() 
      { 
       $(this).jPlayer("setMedia", 
       { 
        m4v: "/video/videoK.mp4", 
        ogv: "/video/videoK.ogg" 
       }).jPlayer("play"); 

       $('article.about-k').hide(); 
       olark('api.box.hide'); 
      }, 
      swfPath: "/scripts/", 
      supplied: "m4v, ogv", 
      size: { 
       width: "100%", 
       height: ($.browser.msie && $.browser.version.substr(0,1)<9) ? "400px" : "auto" 
      }, 
      backgroundColor: "#fff", 
      click: function() { 
       $(this).jPlayer("play"); 
      }, 
      ended: function() { 
       $('.jplayer-k').hide(); 
       $('article.about-k').show(); 
      } 
     })

來源

2012-10-24 23:04:43 furtive

使用Javascript - 我怎樣才能正確地縮小這個代碼

回答

相關問題