Home > Software design >  Double tap redirect only working for the first row on loop
Double tap redirect only working for the first row on loop

Time:06-21

I'm still new to JavaScript and I am try to achieve a double click feature.

The visitor double click on the video and redirect to the page with a unique Id attach to the url but i can't get it working. Here's my code

This only redirect for the first video but not working for other Any help is appreciated

        <video id="doubleTap" autoplay muted>  
    <input id="id" value="1">
    <source src="/ver/videos/2024.mp4" type="video/mp4">
    </video>
    
            <video id="doubleTap" autoplay muted>  
    <input id="id" value="2"> 
          <source src="/ver/videos/2023.mp4" type="video/mp4">

    </video> 
            
<video id="doubleTap" autoplay muted>
            <input id="id" value="3">              
 <source src="/ver/videos/2022.mp4" type="video/mp4">


    </video>
                <script type="text/javascript">
        
        $("#doubleTap").doubleTap(function() {
            var id = document.getElementById("id").value;
        location.href='h.php?id=' id;
        });
        
    </script>

CodePudding user response:

You should use unique id's for your element. Better use CSS classes. Nevertheless, I re-wrote your snippet to be a more valid HTML. How about this:

    $(".doubleTap").dblclick(function() {
      var id = $(this).attr("data-id")
      console.log("id is "   id)
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video  autoplay muted data-id="1">
            <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
          </video>
          <video  autoplay muted data-id="2">
            <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
          </video>
          <video  autoplay muted data-id="3">
            <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
          </video>

  • Related