使用JQUERY将每个练习中的音频附加到div

Question

你好吗？

我正在尝试构建一个测验应用，但我无法发现如何将特定问题的音频附加到屏幕上。

基本上，用户会看到一个问题，三个答案和一个音频。

我如何将每个音频指向当前的练习？

它正在识别第一个音频，但当我跳到第二个问题时，它会显示两个音频播放器对齐，然后它们就会消失。

HTML文件：

 <div id="navContent">

  <div id="game1"></div>
  <div id="game2"></div>
  <div id="audioContainer"></div>
  <div id="audioContainer2"></div>

 </div>

JS

            $(document).ready(function () {

            var questionNumber=0;
            var audioNumber=0;
            var questionBank=new Array();
            var stage="#game1";
            var stage2=new Object;
            var evento = "#audioContainer";
            var evento2 = new Object;
            var questionLock=false;
            var numberOfQuestions;
            var score=0;


            $.getJSON('../../core/part1.json', function(data){

              numberOfQuestions = data.primeiro.length;

                  for(i = 0; i < numberOfQuestions; i++){
                    questionBank[i] = [];
                    questionBank[i].push(data.primeiro[i].question);
                    questionBank[i].push(data.primeiro[i].option1);
                    questionBank[i].push(data.primeiro[i].option2);
                    questionBank[i].push(data.primeiro[i].option3);
                    questionBank[i].push(data.primeiro[i].audio);
            }

            displayQuestion();

            });


            function displayQuestion(){


             var q1;
             var q2;
             var q3;
             var audioFile = questionBank[questionNumber][4];
             var rnd=Math.random()*3;
            rnd=Math.ceil(rnd);

             var wordsShow = $('<li class= "center_txt"><div id="1" class="word-pt bluedark_txt">'+q5+'</div><div id="2" class="bluish_txt word-EN">'+q4+'</div></li>')
             var audioShow = $('<audio controls id="audioPlayer"><source src='+audioFile+' type="audio/mp3"></audio>');



            if(rnd==1){q1=questionBank[questionNumber][1];q2=questionBank[questionNumber][2];q3=questionBank[questionNumber][3];}
            if(rnd==2){q2=questionBank[questionNumber][1];q3=questionBank[questionNumber][2];q1=questionBank[questionNumber][3];}
            if(rnd==3){q3=questionBank[questionNumber][1];q1=questionBank[questionNumber][2];q2=questionBank[questionNumber][3];}

            $(stage).append('<div class="questionText">'+questionBank[questionNumber][0]+'</div><div id="1" class="option">'+q1+'</div><div id="2" class="option">'+q2+'</div><div id="3" class="option">'+q3+'</div>');

  //here is where I try to append the audio, not working
            $("#audioContainer").append(audioShow);

             $('.option').click(function(){
              if(questionLock==false){questionLock=true;    



              //correct answer

              if(this.id==rnd){
              // $("#feedbackBox").append('<div class="feedback1">CORRECT</div>');


               score++;


               }
              //wrong answer    
              if(this.id!=rnd){
              // $("#feedbackBox").append('<div class="feedback2">WRONG</div>');

              }

              setTimeout(function(){changeQuestion()},1000);
             }})

            }//display question


                function changeQuestion(){

                    questionNumber++;
                    wordNumber++;
                    audioNumber++;

                if(stage=="#game1"){stage2="#game1";stage="#game2";}
                    else{stage2="#game2";stage="#game1";}

                if(evento=="#audioContainer"){evento2="#audioContainer";evento="#audioContainer2";}
                    else{evento2="#audioContainer2";evento="#audioContainer";}

                if(questionNumber<numberOfQuestions){displayQuestion();}else{displayFinalSlide();}

                 $(stage2).animate({"right": "+=800px"},"slow", function() {$(stage2).css('right','-800px');$(stage2).empty();});
                 $(stage).animate({"right": "+=800px"},"slow", function() {questionLock=false;});

                $(evento2).animate({"right": "+=800px"},"slow", function() {

                    $(evento2).css('right','-800px');

                    $(evento2).empty();});

                 $(evento).animate({"right": "+=800px"},"slow", function() {questionLock=false;});

                }//change question

谢谢！