1

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

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!

请指教

4

4 回答 4

4

使用三元运算符非常简单：

$("#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-24T23:00:11.297 回答
0

尝试：

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-24T23:03:50.840 回答
0

为什么不：

   <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-24T23:04:43.753 回答
0

它可能是这样的：

<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 而失败

于 2012-10-24T23:01:24.207 回答