支持多个音频文件的jQuery翻转

Question

我有一个有两个面的div。正面有14个问题，所有问题都链接到一个脚本，当问题被单击时，该脚本会翻转卡片。另一方面是一些html5音频控件。我有14个剪辑，我想链接到每个问题，但到目前为止，我只知道如何链接一个。我是个编程新手，我的html/css写得很好，但我现在才刚刚开始学习js。就像上周一样。所以，请原谅我确信这是一个简单的问题。我想知道是否有一种方法来加载每个单独的音频文件，这取决于所点击的问题。因此，如果用户单击问题1，则卡片翻转并加载mp3-1，但如果单击问题7，则卡片翻转并加载mp3-7。有什么想法吗？提前谢谢。

<div id="card">

  <div class="front">
    <button class="buttons audioClick1 play flipMe"></button>
    <button class="buttons audioClick2 flipMe"></button>
    <button class="buttons audioClick3 flipMe"></button>
    <button class="buttons audioClick4 flipMe"></button>
    <button class="buttons audioClick5 flipMe"></button>
    <button class="buttons audioClick6 flipMe"></button>
    <button class="buttons audioClick7 flipMe"></button>
    <button class="buttons audioClick8 flipMe"></button>
    <button class="buttons audioClick9 flipMe"></button>
    <button class="buttons audioClick10 flipMe"></button>
    <button class="buttons audioClick11 flipMe"></button>
    <button class="buttons audioClick12 flipMe"></button>
    <button class="buttons audioClick13 flipMe"></button>
    <button class="buttons audioClick14 flipMe"></button>
  </div>
  <div class="back">
    <audio class="controls" id="myTune" src="audio/clipOne.mp3"></audio>
    <button class="playClip buttonStyle" onclick="document.getElementById('myTune').play()"><img class="svg" src="images/play128.svg" alt="Play Button"></button>
    <button class="pauseClip buttonStyle" onclick="document.getElementById('myTune').pause()"><img class="svg" src="images/pause18.svg" alt="pause button"></button>
    <button class="stopClip buttonStyle" onclick="document.getElementById('myTune').pause(); document.getElementById('myTune').currentTime = 0;"><img class="svg" src="images/media26.svg" alt="Stop Button"></button>
    <button class="flipMe btnMove"></button>
  </div>
</div>
<script>
  $('#card').flip({
    trigger: 'manual'
  })
  $('.flipMe').on('click', function() {
    $('#card').flip('toggle');
  });

</script>
<style>
  //css
  #card {
    width: 58%;
    height: 58%;
    position: relative;
    top: 20px;
    left: 20px;
    // border: 1px solid white;
  }

  .front,
  .back {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }

  .front {
    background-image: url(images/frontCard.jpg);
  }

  .back {
    background-image: url(images/backCard.jpg);
  }

</style>

Answer 1

我没有为你做所有的事情，但这应该会给你一些想法。这是一个有效的例子

HTML

<div id="card">

  <div class="front">
    <button class="buttons audioClick1 flipMe">1</button>
    <button class="buttons audioClick2 flipMe">2</button>
    <button class="buttons audioClick3 flipMe">3</button>

  </div>
  <div class="back">



  </div>
</div>

JavaScript

$(function() {

    $('#card').flip({
        trigger: 'manual'
    });



    $("button").on("click", function() {
        var mp3Number = $(this).text();
        alert(mp3Number)
        $(".back").append("<audio controls src=" + "/mp3-" + mp3Number + "></audio>")

    });

    $('.flipMe').on('click', function() {
        $('#card').flip('toggle');

    });

});