javascript - 精简视频播放列表代码

Question

我想知道如何精简我为视频播放器生成的代码。每次添加新视频时，我都必须复制每个视频的功能并为相关视频复制该功能。有谁知道如何 trim 它，以便当我将新视频添加到列表中时，它会采用正确的功能来显示它，而无需复制、粘贴并仅更改链接。

fiddle 在这里 - http://jsfiddle.net/olichalmers/44tQM/

  $(document).ready(function(){

        var videoContainer = $('.video-hold');
        var videoOneBtn = $('.one');
        var videoTwoBtn = $('.two');
        var videoThreeBtn = $('.three');
        var videoFourBtn = $('.four');

        var videoOne = '<iframe width="100%" height="100%" src="//www.youtube.com/embed/brFKqr0BZcE?wmode=transparent&controls=0&showinfo=0" frameborder="0" allowfullscreen="true"></iframe>';
        var videoTwo = '<iframe width="100%" height="100%" src="//www.youtube.com/embed/wxrYmYyRMZk?wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>';
        var videoThree = '<iframe width="100%" height="100%" src="//www.youtube.com/embed/MaCSd0eD5Rw?wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>';
        var videoFour = '<iframe width="100%" height="100%" src="//www.youtube.com/embed/MaCSd0eD5Rw?wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>';


        videoContainer.append(videoOne);


        videoOneBtn.click(function (e) {

            videoContainer.empty().append(videoOne);

                $('.video-hold iframe').each(function () {

                    var url = $(this).attr("src");

                    $(this).attr("src", url + "&autoplay=1&controls=0&showinfo=0");

                    return false;

                });

                e.preventDefault();
        });




        videoTwoBtn.click(function (e) {

            videoContainer.empty().append(videoTwo);

            $('.video-hold iframe').each(function () {

                var url = $(this).attr("src");

                $(this).attr("src", url + "&autoplay=1&controls=0&showinfo=0");

                return false;

            });

            e.preventDefault();

        });




        videoThreeBtn.click(function (e) {

            videoContainer.empty().append(videoThree);

            $('.video-hold iframe').each(function () {

                var url = $(this).attr("src");

                $(this).attr("src", url + "&autoplay=1&controls=0&showinfo=0");

                return false;

            });

            e.preventDefault();

        });




        videoFourBtn.click(function (e) {

            videoContainer.empty().append(videoFour);

            $('.video-hold iframe').each(function () {

                var url = $(this).attr("src");

                $(this).attr("src", url + "&autoplay=1&controls=0&showinfo=0");

                return false;

            });

            e.preventDefault();

        });



});

最好， 奥利弗

Answer 1

您可以执行以下操作:在 HTML 中，更改 id 中的类，然后添加一个类，如下所示:

        <li><a href="#" class="vidbtn" id="one">Paper Heart</a></li>
        <li><a href="#" class="vidbtn"  id="two">Rumour</a></li>
        <li><a href="#" class="vidbtn"  id="three">Millionaire Transmitter</a></li>
        <li><a href="#" class="vidbtn"  id="four">Another video</a></li>

如果你有这个，你可以像这样执行一次该函数:

$( ".vidbtn" ).click(function(e ) {
        videoContainer.empty().append(eval(this.id));

            $('.video-hold iframe').each(function () {

                var url = $(this).attr("src");

                $(this).attr("src", url + "&autoplay=1&controls=0&showinfo=0");

                return false;

            });

            e.preventDefault();

        });

希望这对您有帮助。

编辑:

这是一个基于您的代码并进行了一些更改的工作 JSFiddle: JSFiddle