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

How to change variable depending on element clicked

本文关键字：改变 变量 元素 何根 单击      更新时间：2023-09-26

学习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元素，不需要编写这个函数10次。那么，如何传递click链接和视频id作为参数，以便使用switch语句使代码更简洁呢?

我是这样想的:

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

但我不确定如何抓取"点击"的id，如果这是有意义的，以及如何抓取视频id。谢谢你的宝贵时间。P

使用以下代码。它所做的是用div封装每个视频代码，并使用each()， parent()和siblings() jquery方法来获取代码的链接。

在你的页面中使用多个带有更新的iframe视频链接的div块

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();
                    }
                });
            });
        });
    你可以在许多元素上使用.clickable类来代替id# clickable。
  • 在所有元素上，你可以动态地定义变量，使用像variable1="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>

相关文章：