How To Change Variable Depending On Element Clicked

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

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

<divclass="videoBlock"><p>
    ...some text...
    <spanclass="link">Video 1</span>.
    <br /><span><iframeclass="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%;
}

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

Solution 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 Linkvar eleLink = $(this).attr('href');
    
    //get other custom Variable you wantvar customVariable = $(this).attr('customVariable');
    
    // To make sure You get them correctlyalert("LINK>>>> " + eleLink+"\n and " + "\nCUSTOM VARIABLE>>>>" + customVariable);


    // $(this) is element you have clicked// here you need to write down your own logic 

});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><aclass="clickable open"href="http://google.com/1"customVariable="customValue1">Vedio Link 1</a><br /><br /><aclass="clickable open"href="http://google.com/2"customVariable="customValue2">Vedio Link 2</a><br /><br /><aclass="clickable open"href="http://google.com/3"customVariable="customValue3">Vedio Link 3</a>