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

    });

});

jQuery翻转多个音频文件

1 个答案: