Question

关于浏览器版本，播放器高度应该更改

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!

请咨询

Answer 1

使用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,
      …
});

Answer 2

可能是这样的：

<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>

<强>更新
我在Fabriccio Matte建议的上面添加了代码，因此您的代码不会因IE10而失败

Answer 3

尝试：

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的建议。

Answer 4

为什么不：

   <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();
            }
        })

Javascript - 如何正确收缩此代码

4 个答案: