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

Question

学习javascript。 我有一个项目，该项目的链接会触发iframe中的视频。 这个想法是，当您单击链接（在这种情况下，其ID为“ clickable”）时，视频将显示并开始播放。 再次单击时，它将关闭，并且在结束播放时也会自动关闭。 我写了一些糟糕的代码，有人已经帮助我解决了这个功能：

$(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....

但是我不确定如何获取“点击”的ID（如果有意义），以及如何获取视频ID。 谢谢你的时间。 P

Answer 1

• 代替id #clickable，您可以在许多元素上使用.clickable类。
• 您可以在所有元素上使用属性来动态定义变量，例如LIKE variable1 =“ yourValue” variable2 =“ yourValue”
• 您可以通过以下功能访问它们：

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

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

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