Как изменить переменную в зависимости от нажатого элемента

изучение javascript. У меня есть проект со ссылками, которые запускают видео, которые живут внутри iframe. Идея заключается в том, что при нажатии на ссылку (с идентификатором «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, не нужно писать эту функцию десять раз. Итак, как бы я передал ссылку click и идентификатор видео в качестве аргументов, чтобы я мог использовать оператор switch, чтобы быть немного более элегантным о моем коде?

Я думаю вдоль линий:

var userClick;

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

Но я не уверен, как захватить идентификатор «нажмите», если это имеет смысл, и как захватить видео id. Спасибо, что уделили мне время. P

2 ответа

    • Вместо id #clickable вы можете использовать класс .кликабельный на многих элементах.
    • Для всех элементов можно определить переменные динамически, используя атрибуты типа 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>

  1. Используйте следующий код. Что он делает, это инкапсулирует каждый Видео-Код, который у вас есть с div и использует каждый (), родительский() и братьев и сестер() методы 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();
                        }
                    });
                });
            });