时间戳

首页 > 解决方案 > 如何在我的页面上用鼠标单击一个按钮，然后触发对同一页面上的链接的单击？

javascript - 如何在我的页面上用鼠标单击一个按钮，然后触发对同一页面上的链接的单击？

问题描述

我有一个学习管理 Wordpress 主题，它会根据您正在观看的视频自动生成指向上一个和下一个视频的链接（视频 2 将有一个指向视频 1 的上一个链接和视频描述中指向视频 3 的下一个链接）。

我想在我的自定义视频播放上添加上一个和下一个按钮，单击这些按钮会触发 WordPress 主题已经生成的上一个和下一个链接。

我怎么会有一个按钮，当点击时，点击同一页面上的链接？

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
    <meta charset="utf-8">
    <title>HTML 5 VIDEO PLAYER</title>
    <script src="main.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="font-awesome/css/all.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Previous & Next Video Buttons -->
        <div id="video-arrows">
            <button type="button" id="previous-arrow"><a href="previous-video"></a><i class="fas fa-chevron-left"></i></button>
            <button type="button" id="next-arrow"><a href="next-video"></a><i class="fas fa-chevron-right"></i></button>
        </div>
<div class="random-text">
        <h1>Video title</h1>
        <h4><span id="view-count"></span> views</h4>
        <p>Descriptions can convey valuable information that helps viewers find your videos in search results and understand what they’ll be watching. Well-written descriptions with the right keywords can boost views and watch time because they help your video show up in search results.</p>
        <a href="https://www.icloud.com/" target="_blank" id="previous-video">Previous</a>
        <a href="https://google.com" target="_blank" id="next-video">Next</a>
    </div>
</body>
</html>

window.onload = function() {
var nextArrow = document.getElementById('next-arrow')
var prevArrow = document.getElementById('previous-arrow')
$(document).ready(function(){
    $(nextArrow).on('click', function () {
      $('#next-video').click();
    });
    $(prevArrow).on('click', function () {
      $('#previous-video').click();
    });
});
}

它没有给出任何错误它只是不起作用

标签： javascriptjqueryhtml

解决方案

尝试$('#next-video')[0].click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<button onclick="console.log('A')" id="A">A</button>
<button onclick="$('#A')[0].click()">B</button>

推荐阅读