javascript - 如何通过 Javascript 在此 HTML 中传递 src 值
问题描述
我已将代码粘贴到
<https://pastebin.com/z8q5cavm>
我将在数据表中有大量行列表，每一行都有一个特定的 href 或 mp3 文件链接。然而，代码总是打开 serm.mp3，即使我在链接中传递了任何内容。
有人可以帮我解决这个javascript吗？
基本上想在单击数据表中的 href 链接打开媒体播放器时更改 mp3 文件的 src
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<link rel='manifest' href='/manifest.json'>
<link rel="stylesheet" src="style.css">
<link rel="icon" type="image/png" href="icon1.png" />
<link rel='manifest' href='/manifest.json'>
<meta name="theme-color" content="#ffffff">
<meta name="apple-mobile-web-app-status-bar" content="#ffffff" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--mobile icons-->
<link rel='shortcut icon' type='image/x-icon' href="images/icon.png" />
<link rel="apple-touch-icon" sizes="74x74" href="images/icon-74.png" />
<link rel="apple-touch-icon" sizes="96x96" href="images/icon-96.png" />
<link rel="apple-touch-icon" sizes="144x144" href="images/icon-144.png" />
<link rel="apple-touch-icon" sizes="384x384" href="images/icon-384.png" />
<link rel="apple-touch-icon" sizes="512x512" href="images/icon-512.png" />
<link href="https://fonts.googleapis.com/css?
family=Montserrat:400,700|Oxygen:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="fonts/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="fonts/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- Theme Style -->
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="../../extensions/Editor/css/editor.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
<script type="text/javascript" src="DataTables/datatables.min.js"></script>
<style>
a.buttons-collection {
margin-left: 1em;
}
</style>
</head>
<body>
<section>
<div style="margin: 20px;">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>S No</th>
<th>Title</th>
<th>Listen</th>
<th>Download</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td >Mp31</td>
<td ><a href="media/mp3/test1.mp3" title="Click To Listen" data-toggle="modal" data-target="#exampleModal"
data-value="media/mp3/test1.mp3">Listen <svg class="bi bi-caret-right-square-fill" width="2em" height="2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.5 10a.5.5 0 0 0 .832.374l4.5-4a.5.5 0 0 0 0-.748l-4.5-4A.5.5 0 0 0 5.5 4v8z"/>
</svg> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td >Mp32</td>
<td ><a href="media/mp3/test2.mp3" title="Click To Listen" data-toggle="modal" data-target="#exampleModal" onClick=""
data-value="media/mp3/test2.mp3">Listen <svg class="bi bi-caret-right-square-fill" width="2em" height="2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.5 10a.5.5 0 0 0 .832.374l4.5-4a.5.5 0 0 0 0-.748l-4.5-4A.5.5 0 0 0 5.5 4v8z"/>
</svg> </td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>S No</th>
<th>Title</th>
<th>Listen</th>
<th>Download</th>
</tr>
</tfoot>
</table>
</div>
</section>
<!--MP3 modal-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">MP3</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" >
<div class="row" style="padding: 10px;">
<button type="button" class="btn btn-primary"><audio controls preload="metadata" style=" width:450px;">
<source src="media/mp3/serm.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio></button>
</div>
</div>
</div>
</div>
</div>
<!-- loader -->
<div id="loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#f4b214"/></svg>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/main.js"></script>
<script src="js/main.js"></script>
<script src="js/app.js"></script>
<script>$(document).ready(function() {
var t = $('#example').DataTable( {
"columnDefs": [ {
"searchable": false,
"orderable": false,
"targets": 0
} ],
"order": [[ 1, 'asc' ]],
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
],
responsive: true,
} );
t.on( 'order.dt search.dt', function () {
t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw();
} );</script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js">
</script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
</body>
</html>
</code>
谢谢
解决方案
由于您已将 src 值硬编码为 serm.mp3，因此您得到了它。
您需要添加以下脚本，以使用您发送到模态的数据值。
<script>
$('#exampleModal').on('show.bs.modal', function(e) {
var value = e.relatedTarget.dataset.value;
$('audio').attr('src', value);
});
</script>
这是演示。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<link rel='manifest' href='/manifest.json'>
<link rel="stylesheet" src="style.css">
<link rel="icon" type="image/png" href="icon1.png" />
<link rel='manifest' href='/manifest.json'>
<meta name="theme-color" content="#ffffff">
<meta name="apple-mobile-web-app-status-bar" content="#ffffff" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--mobile icons-->
<link rel='shortcut icon' type='image/x-icon' href="images/icon.png" />
<link rel="apple-touch-icon" sizes="74x74" href="images/icon-74.png" />
<link rel="apple-touch-icon" sizes="96x96" href="images/icon-96.png" />
<link rel="apple-touch-icon" sizes="144x144" href="images/icon-144.png" />
<link rel="apple-touch-icon" sizes="384x384" href="images/icon-384.png" />
<link rel="apple-touch-icon" sizes="512x512" href="images/icon-512.png" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Oxygen:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="fonts/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="fonts/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- Theme Style -->
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="../../extensions/Editor/css/editor.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
<script type="text/javascript" src="DataTables/datatables.min.js"></script>
<style>
a.buttons-collection {
margin-left: 1em;
}
</style>
</head>
<body>
<section>
<div style="margin: 20px;">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>S No</th>
<th>Title</th>
<th>Listen</th>
<th>Download</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td >Mp31</td>
<td ><a href="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" title="Click To Listen" data-toggle="modal" data-target="#exampleModal"
data-value="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3">Listen <svg class="bi bi-caret-right-square-fill" width="2em" height="2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.5 10a.5.5 0 0 0 .832.374l4.5-4a.5.5 0 0 0 0-.748l-4.5-4A.5.5 0 0 0 5.5 4v8z"/>
</svg> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td >Mp32</td>
<td ><a href="media/mp3/test2.mp3" title="Click To Listen" data-toggle="modal" data-target="#exampleModal" onClick=""
data-value="media/mp3/test2.mp3">Listen <svg class="bi bi-caret-right-square-fill" width="2em" height="2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.5 10a.5.5 0 0 0 .832.374l4.5-4a.5.5 0 0 0 0-.748l-4.5-4A.5.5 0 0 0 5.5 4v8z"/>
</svg> </td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>S No</th>
<th>Title</th>
<th>Listen</th>
<th>Download</th>
</tr>
</tfoot>
</table>
</div>
</section>
<!--MP3 modal-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">MP3</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" >
<div class="row" style="padding: 10px;">
<button type="button" class="btn btn-primary">
<audio id="player" controls><source src="" type="audio/mpeg"></audio>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- loader -->
<div id="loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#f4b214"/></svg></div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/main.js"></script>
<script src="js/main.js"></script>
<script src="js/app.js"></script>
<script>$(document).ready(function() {
var t = $('#example').DataTable( {
"columnDefs": [ {
"searchable": false,
"orderable": false,
"targets": 0
} ],
"order": [[ 1, 'asc' ]],
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
],
responsive: true,
} );
t.on( 'order.dt search.dt', function () {
t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw();
} );</script>
<script>
$('#exampleModal').on('show.bs.modal', function(e) {
var value = e.relatedTarget.dataset.value;
$('audio').attr('src', value);
});
</script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
</body>
</html>推荐阅读
- javascript - babel 的输出：删除节点模块中的箭头函数
- php - Laravel DB 语句 - 创建数据库不起作用
- javascript - 如何根据下拉选择的值过滤 html 表格？
- git - git标签的存储效率低吗？
- linux - 使用 windows 而不是 Linux 时 UDP 数据包丢失
- elasticsearch - Elasticsearch搜索嵌套字段的第一个元素
- robotframework - 通过 selenium2library 在 Firefox 浏览器中出现“已建立的连接被主机中的软件中止”错误
- javascript - 提交联系表格后如何到达页面上的特定位置？
- laravel - 如何使用 jwt 在 Laravel 中授权用户和管理员？
- c# - EF Core - 使用参考导航属性（外键）保存的模式