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

Question

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

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

使用以下代码。它的作用是将您拥有的每个视频代码封装在一个 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();
                    }
                });
            });
        });

Answer 2

• 您可以在许多元素上使用 .clickable 类来代替 id #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>