JavaScript函數導致所有HTML音頻標籤顯示

我試圖阻止HTML音頻標籤顯示在屏幕上。正如您通過以下代碼可以看到的，僅當選擇了選項卡1選項卡並且僅當選擇了選項卡2時才顯示音頻按鈕4-6時，纔會顯示第1-3首音頻按鈕。目前正在顯示所有按鈕。JavaScript函數導致所有HTML音頻標籤顯示

<?php 
/* 
$files1 = glob("mp3/files1/*.mp3"); 
$files2 = glob("mp3/files2/*.mp3"); 
*/ 
$files1 = Array ('1' => 'mp3/files1/song1.mp3', '2' => 'mp3/files1/song2.mp3', '3' => 'mp3/files1/song3.mp3'); 
$files2 = Array ('4' => 'mp3/files2/song4.mp3', '5' => 'mp3/files2/song5.mp3', '6' => 'mp3/files2/song6.mp3'); 
?> 
<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<script> 
function myFunction() { 
    var x = document.getElementById("myTopnav"); 
    if (x.className === "topnav") { 
     x.className += " responsive"; 
    } else { 
     x.className = "topnav"; 
    } 
} 
</script> 

<script> 
function showStuff(element) { 
    var tabContents = document.getElementsByClassName('tabContent'); 
    for (var i = 0; i < tabContents.length; i++) { 
     tabContents[i].style.display = 'none'; 
    } 

    // change tabsX into tabs-X in order to find the correct tab content 
    var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1'); 
    document.getElementById(tabContentIdToShow).style.display = 'block'; 
} 
</script> 

<style type="text/css" media="screen"> 
button { 
    -moz-border-radius: 5px; 
    background: white; 
    border: 3px solid black; 
    display: inline-block; 
    cursor: pointer; 
    padding: 3px 5px; 
    margin: 5px; 
} 

.tabContent { 
    display:none; 
} 

h1 { 
    color: black; 
} 

body { 
    margin:0; 
} 

/* Remove margins and padding from the list, and add a black background color */ 
ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

/* Float the list items side by side */ 
ul.topnav li {float: left;} 

/* Style the links inside the list items */ 
ul.topnav li a { 
    display: inline-block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
} 

ul.topnav li a:hover {background-color: #555;} 

ul.topnav li.icon {display: none;} 


</style> 
</head> 
<body> 
<ul class="topnav" id="myTopnav"> 
    <li id="tabs1" onclick="showStuff(this)"><a href="#1">Tab 1</a></li> 
    <li id="tabs2" onclick="showStuff(this)"><a href="#2">Tab 2</a></li> 
</ul> 




<div id="doc"> 
    <h1>Title</h1> 

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

    <!-- ++++++++++++++++++++ This function is the culprit ++++++++++++++++++++ --> 
    <script type="text/javascript" charset="utf-8"> 
     $(function() { 
      $("audio").removeAttr("controls").each(function(i, audioElement) { 
       var audio = $(this); 
       var that = this; //closure to keep reference to current audio tag 
       $("#doc").append($('<button>'+audio.attr("title")+'</button>').click(function() { 
        that.play(); 
       })); 
      }); 
     }); 
    </script> 
    <!-- ++++++++++++++++++++ This function is the culprit ++++++++++++++++++++ --> 


    <!-- Tab Content --> 

    <div id="tabs-1" class="tabContent"> 
     <p>Tab 1 Content</p> 
     <?php foreach($files1 as $file) { ?> 
      <?php $title = str_replace(".mp3", "", str_replace("mp3/files1/", "", $file)); ?> 
      <audio src="<?php echo $file; ?>" controls autobuffer="true" title="<?php echo $title ?>"></audio> 
     <?php } ?> 
    </div> 


    <div id="tabs-2" class="tabContent"> 
     <p>Tab 2 Content</p> 
     <?php foreach($files2 as $file) { ?> 
      <?php $title = str_replace(".mp3", "", str_replace("mp3/files2/", "", $file)); ?> 
      <audio src="<?php echo $file; ?>" controls autobuffer="true" title="<?php echo $title ?>"></audio> 
     <?php } ?>   
    </div> 


</div> 
</body> 
</html>

正如你可以看到下面的函數是什麼導致音頻對象總是顯示，無論他們在什麼DIV或標籤。

<script type="text/javascript" charset="utf-8"> 
    $(function() { 
     $("audio").removeAttr("controls").each(function(i, audioElement) { 
      var audio = $(this); 
      var that = this; //closure to keep reference to current audio tag 
      $("#doc").append($('<button>'+audio.attr("title")+'</button>').click(function() { 
       that.play(); 
      })); 
     }); 
    }); 
</script>

有沒有一種方法可以修改它，所以你仍然可以得到「按鈕」，並且它們顯示在適當的選項卡上？

編輯如果你改變$（「＃DOC」），以$（「＃標籤-1」）的按鈕將僅在該id顯示。如果你可以設置它，所以它只能從mp3/files1中提取，然後你可以創建多個實例，並有另一個說mp3 /文件2，這將解決問題。我不知道如何爲該功能設置特定的目錄。

來源

2017-02-01 Pie

據我理解，爲什麼你會不把音頻標籤在HTML 像

<audio id="audio1" src="assets/sounds/Youraudio.mp3" preload="auto"></audio><button onclick="play()">Play</button>

，然後你可以玩火功能JS發揮它，或者您也可以生成與jQuery

音頻

$("<audio></audio>").attr({ 
    'src': 'assets/audio/' + 'youraudio.mp3', 
    'volume': 0.4, 
    'autoplay': 'autoplay' 
}).appendTo("body");

來源

2017-02-01 01:13:32

我一直沒有能夠得到那與PHP函數foreach循環，我有。我做了一個編輯，可以讓事情更清楚。 – Pie

JavaScript函數導致所有HTML音頻標籤顯示

回答

相關問題