如何根据点击元素更改变量 [英] How to change variable depending on element clicked

问题描述

学习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）; $ b （））; 
））; 
 
 $（＃clickable）。click（function（）{
 if（frame.hasClass（open））
 {
 frame.removeClass（open）; 
 player [0] .pause（）; 
} 
 else {
 frame.addClass（打开）; 
 player [0] .play（）; 
} 
}）; 
}）; 
  

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

我在想：

  var userClick; 
 $ b userClick.on（'click'function（）{
 var frame = $（＃frame）; 
 var player; 
 etc ... 
  

但我不确定如何获得点击的ID，如果有意义的话，如何获取视频ID，感谢您的时间P

解决方案

使用下面的代码。视频代码，你有一个div，并使用each（），parent（）和siblings（）jquery方法来到你的代码链接。

在您的网页中嵌入更新的iframe视频链接

HTML代码：

 < div class =videoBlock> 
< p> 
 ...某些文字... 
< span class =link > 
< span> 
< iframe class =rectsrc =http：//clips.vorwaerts- gmbh.de/VfE_html5.mp4scrolling =nomarginwidth =0marginheight = 0 >< / iframe中> 
< / span> 
< br /> 
 ...更多文字... 
< / p> 
< / div> 
  

CSS加法

  .rect {
 float：left; 
 height：0px; 
 width：350px; 
 display：block; 
 margin：0px; 
 padding：0px; 
 opacity：0; 
 
 transition-property：all; 
 transition-duration：2s; 
转换 - 定时功能：缓入; 
} 
 
 .open {
 height：200px; 
 width：350px; 
 opacity：1; 
 padding-bottom：10px; 
 padding-top：10px; 
} 
 
 .videoBlock {
 display：block; width：100％; 
} 
 
 .videoBlock跨度{
 display：inline-block; 
} 
  

最后使用下面的 jQuery脚本

  $（document）.ready（function（）{
 $（'。rect'）。each（function（）{ 
 
 var frame = $（this）; 
 var player; 
 $ b 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）; 
播放器[0] .play（）; 
} 
}）; 
}）; 
}）; 
  

learning javascript. I got a project with links that trigger videos that live inside an iframe. The idea is that when you click the link (with id of "clickable" in this case), the video is displayed and starts playing. When you click again it closes and it also closes automatically when it ends playing. I wrote some terrible code and someone's already helped me out with this function:

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

This works perfectly. What I would like now is, since my page contains about 10 iframe elements, not have to write this function ten times. So how would I pass the click link and the video id as arguments so that I can use a switch statement to be a bit more elegant about my code?

I am thinking along the lines:

var userClick;

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

But I am not sure how to grab the id of the "click" if that makes sense, and how to grab the video id. Thanks for your time. P

解决方案

Use the following code. What it does is it encapsulates each video code you have with a div and uses each(), parent() and siblings() jquery methods to get to the link of your code.

Use multiple following div blocks with updated iframe video links in your page

HTML Code:

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

.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;
        }

Finally use the following jQuery script

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

这篇关于如何根据点击元素更改变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！