如何通过 Javascript 在此 HTML 中传递 src 值
[英]How to pass the src value in this HTML via Javascript
问题描述
I have pasted the code in
我已将代码粘贴到
<https://pastebin.com/z8q5cavm>
I will be having huge list of rows in the datatable and each row will have a specific href or mp3 file link.我将在数据表中有大量行列表，每一行都有一个特定的 href 或 mp3 文件链接。 However the code always opens the serm.mp3 eventhough whatever i pass in the link.然而，代码总是打开 serm.mp3，即使我在链接中传递了任何内容。
Can someone help me on how to fix this javascript?有人可以帮我解决这个 javascript 吗？
Basically want to change the src of the mp3 file when the media player open on clicking the href link in the datatable基本上想在单击数据表中的 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>
Thanks谢谢
1 个解决方案
解决方案1
0 已采纳 2020-07-05 04:49:30
Since you have hard coded the src value to serm.mp3, you are getting that.由于您已将 src 值硬编码为 serm.mp3，因此您得到了它。
you need add following script, to make use data-value which you are sending to modal.您需要添加以下脚本，以使用您发送到模态的数据值。
<script>
$('#exampleModal').on('show.bs.modal', function(e) {
var value = e.relatedTarget.dataset.value;
$('audio').attr('src', value);
});
</script>
here is the demo.这是演示。
<.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在JavaScript中将变量值传递给src - How to pass a variable value to src in javascript
动态地将随机javascript数组值传递给html img src - Dynamically pass random javascript array value to html img src
如何使用javascript / jquery将值传递给Android phonegap中的HTML5视频标签src属性？ - How to pass the value to HTML5 video tag src attribute in Android phonegap using javascript/jquery?
通过 SRC 属性将变量传递给 JavaScript - Pass vars to JavaScript via the SRC attribute
如何使用javascript或jquery在src =“ @ url.content”中传递值 - How to pass a value in src=“@url.content” using javascript or jquery
如何将 javascript 变量传递给 javascript src 链接 - How to pass javascript variable to javascript src link
如何将值从 javascript 传递到 html - How to pass value from javascript to html
如何将javascript值传递给html href属性？ - How to pass javascript value to html href attribute?
如何将值从javascript传递到laravel中的html？ - how to pass value from javascript to html in laravel?
如何将值从javascript传递到html？ - how to pass value from javascript to html?
相关标签