Question

学习javascript。我有一个项目，其中包含触发iframe内部视频的链接。我们的想法是，当您点击链接（ID为＆＃34;可点击＆＃34;在这种情况下）时，视频会显示并开始播放。再次单击时，它会关闭，并在播放结束时自动关闭。我写了一些可怕的代码，而且有人帮我完成了这个功能：

$(document).ready(function(){

        var frame = $("#frame");
        var player;

        frame.bind("load", function () {
            player = $(this).contents().find("#myVid");
            player.on('ended', function () {
                frame.removeClass("open");
            });
        });

        $("#clickable").click(function(){
            if (frame.hasClass("open")) 
            {
                frame.removeClass("open");
                player[0].pause();
            } 
            else {
                frame.addClass("open");
                player[0].play();
            }
        });
    });

这完美无缺。我现在想要的是，因为我的页面包含大约10个iframe元素，所以不必写十次这个函数。那么我如何将点击链接和视频ID作为参数传递给我，以便我可以使用switch语句使我的代码更优雅一些？

我正在思考：

var userClick;

    userClick.on('click' function () {
        var frame = $("#frame");
        var player;
   etc....

但我不知道如何抓住＆＃34;点击＆＃34;如果这是有道理的，以及如何获取视频ID。谢谢你的时间。 P

Answer 1

您可以在许多元素上使用类.clickable而不是id #clickable。
在所有元素上，您可以使用属性LIKE variable1 =＆＃34; yourValue＆＃34;动态定义变量。变量2 =＆＃34; yourValue＆＃34;
您可以通过以下功能访问它们：

＆＃13;

$('.clickable').click(function(e) { 
    event.preventDefault();
    
    //get Link
    var eleLink = $(this).attr('href');
    
    //get other custom Variable you want
    var customVariable = $(this).attr('customVariable');
    
    // To make sure You get them correctly
    alert("LINK>>>> " + eleLink+"\n and " + "\nCUSTOM VARIABLE>>>>" + customVariable);


    // $(this) is element you have clicked
    
    // here you need to write down your own logic 

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="clickable open" href="http://google.com/1" customVariable="customValue1">Vedio Link 1</a>
<br /> <br />
<a class="clickable open" href="http://google.com/2" customVariable="customValue2">Vedio Link 2</a>
<br /><br />
<a class="clickable open" href="http://google.com/3" customVariable="customValue3">Vedio Link 3</a>

＆＃13;

Answer 2

使用以下代码。它的作用是用div封装你拥有的每个视频代码，并使用each（），parent（）和siblings（）jquery方法来获取代码的链接。

在页面中使用多个以下div块和更新的iframe视频链接

HTML代码：

<div class="videoBlock">
  <p>
    ...some text...
    <span class="link">Video 1</span>.
    <br />
    <span>
       <iframe class="rect" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" scrolling="no" marginwidth="0" marginheight="0"></iframe>
    </span>
    <br />
    ...some more text...
  </p>
</div>

CSS添加

.rect{
    float: left;
    height: 0px;
    width: 350px;
    display: block;
    margin: 0px;
    padding: 0px;
    opacity: 0;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 200px;
    width: 350px;
    opacity: 1;
    padding-bottom: 10px;
    padding-top: 10px;
}

.videoBlock{
display:block;width:100%;
}

        .videoBlock span {
            display:inline-block;
        }

最后使用以下 jQuery脚本

$(document).ready(function () {
            $('.rect').each(function () {

                var frame = $(this);
                var player;

                frame.bind("load", function () {
                    player = $(this).contents().find("#myVid");
                    player.on('ended', function () {
                        frame.removeClass("open");
                        alert('finished');
                    });
                });

                frame.parent().siblings(".link").click(function () {
                    if (frame.hasClass("open")) {

                        frame.removeClass("open");
                        player[0].pause();

                    } else {

                        frame.addClass("open");
                        player[0].play();
                    }
                });
            });
        });

如何根据点击的元素更改变量

2 个答案: