Javascript 具有多个音频文件的jQuery Flip

我有一个双面的沙发。正面有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>

$（“#卡片”）。翻转({
触发器：“手动”
})
$（'.flipMe'）。在（'click'，function（）上{
$（'卡片'）.flip（'切换'）；
});
//css
#卡片{
宽度：58%；
身高：58%；
位置：相对位置；
顶部：20px；
左：20px；
//边框：1px纯白；
}
.前线，
.回来{
位置：绝对位置；
宽度：100%；
身高：100%；
背景尺寸：封面；
背景位置：中心；
}
.前线{
背景图片：url（images/frontCard.jpg）；
}
.回来{
背景图片：url（images/backCard.jpg）；
}

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

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>

1.
2.
3.

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');

    });

});

$（函数（）{
$（“#卡片”）。翻转({
触发器：“手动”
});
$（“按钮”）。在（“单击”，函数（）{
var mp3Number=$（this.text（）；
警报（MP3编号）
$（“.back”）.append（“”）
});
$（'.flipMe'）。在（'click'，function（）上{
$（'卡片'）.flip（'切换'）；
});
});

我很感谢您的努力，但使用此代码，页面只加载div的背面，而不是按钮实际所在的正面。正如我所说，我并没有为您完成全部工作，但它应该会给您一个想法