How to change variable depending on element clicke

Question

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

Answer 1

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

Answer 2

• Instead of id #clickable you can use class .clickable on many elements.
• On all elements you can defined variables dynamically using attributes LIKE variable1="yourValue" variable2="yourValue"
• And you can access them in below function:

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