오디오를 트리거하는 페이지 변수 onclick

Question

오디오 클립을 트리거하는 데 약간의 도움이 필요합니다. 페이지에는 다섯 개의 아이콘이 있습니다. 5 명이 모두 클릭되면 오디오 클립이 재생됩니다. 여기

html로한다 : 여기 아래 이미지는

<div class="slide overlay-container" id="inter8"> 
    <div class="container content box-middle slide-back8"> 
     <audio data-autoplay> 
      <source src="audio/mars_glm_intro_slide05a.mp3" type="audio/mp3"> 
     </audio> 

     <div class="row zero"> 
      <div class="top txt-ctr"> 
       <div class="col-md-2 col-xs-2"> 
        <img src="images/Icon.png" style="width:150px; height:93px;"> 
       </div> 
      </div> 
     </div> 
     <!-- Icons and bars --> 
     <div class="row zero"> 
      <div class="mdl txt-ctr hght txt-white"> 
       <div class="col-md-2 col-xs-2 mar"></div> 

       <!-- Blue --> 
       <div class="col-md-2 col-xs-2 icn1 btn1" tabindex="1"> 
        <img src="images/Icon1.png" style="width:150px; height:93px;"> 
       </div> 
       <div class="col-md-2 col-xs-2 blu mar"> 
        Recruit and<br> 
        Onboard<br> 
        current and<br> 
        future Associates 
       </div> 
       <!-- Green --> 
       <div class="col-md-2 col-xs-2 icn2 btn2" tabindex="1"> 
        <img src="images/Icon2.png" style="width:150px; height:93px;"> 
       </div> 
       <div class="col-md-2 col-xs-2 green mar"> 
        Maximize<br> 
        Performance<br> 
        of Associates 
       </div> 
       <!-- Purple --> 
       <div class="col-md-2 col-xs-2 icn3 btn3" tabindex="1"> 
        <img src="images/Icon3.png" style="width:150px; height:93px;"> 
       </div> 
       <div class="col-md-2 col-xs-2 purple mar"> 
        Engage<br> 
        Associates 
       </div> 
       <!-- Orange --> 
       <div class="col-md-2 col-xs-2 icn4 btn4" tabindex="1"> 
        <img src="images/Icon4.png" style="width:150px; height:93px;"> 
       </div> 
       <div class="col-md-2 col-xs-2 orange mar"> 
        Develop<br> 
        Associates 
       </div> 
       <!-- Yellow --> 
       <div class="col-md-2 col-xs-2 icn5 btn5" tabindex="1"> 
        <div class="play"> 
         <img src="images/Icon5.png" style="width:150px; height:93px;"> 
        </div> 
       </div> 
       <div class="col-md-2 col-xs-2 yellow mar"> 
        All in the<br> 
        Mars Way 
       </div> 
      </div> 
     </div> 
     <div class="row page8-btm zero"> 
      <div class="btm"> 
       <h2>What is Great Line Management?</h2> 
       <p>Click the icons to learn more.</p> 
      </div> 
     </div> 
    </div> 
</div> 

그리고 여기에 스크립트입니다 : 내가 어떤 스크립트 오류를받지 못했습니다

var click1 = false; 
var click2 = false; 
var click3 = false; 
var click4 = false; 
var click5 = false; 

$('.btnClass').click(checkProg); 

function checkProg(){ 
    var thisBtn = $(this).attr('id'); 

    if(thisBtn == "btn1") { 
     click1 = true; 
    } else if (thisBtn == "btn2") { 
     click2 = true; 
    } else if (thisBtn == "btn3") { 
     click3 = true; 
    } else if (thisBtn == "btn4") { 
     click4 = true; 
    } else if (thisBtn == "btn5") { 
     click5 = true; 
    } 

    if(click1 == true && click2 == true && click3 == true && click4 == true && click5 == true) { 
     'audio/mars_glm_intro_slide05b.mp3' 
    } 
} 

. 그래서 분명히 나는 ​​뭔가를 간과하고있다. 어떤 도움이라도 대단히 감사 할 것입니다.

Answer 1

코드에 몇 가지 문제가 있습니다. 설명해 드리겠습니다 :

1) .btnClass라는 클래스가있는 요소의 클릭 수는 처리하고 있지만 코드에 표시되는 요소에는 해당 클래스가 할당되어 있지 않습니다.

2) 클릭 한 요소의 ID를 확인하고 속성 ID를 검색하지만 btnX 값이 ID가 아닌 클래스로 추가됩니다.

<div class="slide overlay-container" id="inter8"> 
     <div class="container content box-middle slide-back8"> 
     <audio data-autoplay> 
     <source src="audio/mars_glm_intro_slide05a.mp3" type="audio/mp3"> 
    </audio> 

      <div class="row zero"> 
       <div class="top txt-ctr"> 
        <div class="col-md-2 col-xs-2"><img src="images/Icon.png" style="width:150px; height:93px;"> 
        </div> 
       </div> 
      </div> 
      <!-- Icons and bars --> 
      <div class="row zero"><div class="mdl txt-ctr hght txt-white"> 
       <div class="col-md-2 col-xs-2 mar"> 

       </div> 

       <!-- Blue --> 
       <div class="col-md-2 col-xs-2 icn1" tabindex="1">     <img id="btn1" src="images/Icon1.png" style="width:150px; height:93px;" class="imgClicker"> 
       </div> 
       <div class="col-md-2 col-xs-2 blu mar">Recruit and<br> 
        Onboard<br> 
        current and<br> 
        future Associates 
       </div> 
       <!-- Green --> 
       <div class="col-md-2 col-xs-2 icn2" tabindex="1"> <img id="btn2" src="images/Icon2.png" style="width:150px; height:93px;" class="imgClicker"> 
       </div> 
       <div class="col-md-2 col-xs-2 green mar">Maximize<br> 
        Performance<br> 
        of Associates 
       </div> 
       <!-- Purple --> 
       <div class="col-md-2 col-xs-2 icn3" tabindex="1"><img id="btn3" src="images/Icon3.png" style="width:150px; height:93px;" class="imgClicker"> 
       </div> 
       <div class="col-md-2 col-xs-2 purple mar">Engage<br> 
        Associates 
       </div> 
       <!-- Orange --> 
       <div class="col-md-2 col-xs-2 icn4" tabindex="1"><img id="btn4" src="images/Icon4.png" style="width:150px; height:93px;" class="imgClicker"> 
       </div> 
       <div class="col-md-2 col-xs-2 orange mar">Develop<br> 
        Associates 
       </div> 
       <!-- Yellow --> 
       <div class="col-md-2 col-xs-2 icn5" tabindex="1"><div class="play"><img id="btn5" src="images/Icon5.png" style="width:150px; height:93px;" class="imgClicker"></div> 
       </div> 
       <div class="col-md-2 col-xs-2 yellow mar">All in the<br> 
        Mars Way 
       </div> 
       </div> 
      </div> 
      <div class="row page8-btm zero"><div class="btm"> 
       <h2>What is Great Line Management?</h2> 
       <p>Click the icons to learn more.</p></div> 

      </div> 
     </div> 
    </div> 

자바 스크립트 코드를 :

이 코드는 당신이 필요하지

var click1 = false; 
    var click2 = false; 
    var click3 = false; 
    var click4 = false; 
    var click5 = false; 

    $('.imgClicker').click(checkProg); 

    function checkProg(){ 
    var thisBtn = $(this).attr('id'); 

    if(thisBtn == "btn1"){ 
     click1 = true; 
    }else if (thisBtn == "btn2"){ 
    click2 = true; 
    }else if (thisBtn == "btn3"){ 
    click3 = true; 
    }else if (thisBtn == "btn4"){ 
    click4 = true; 
    }else if (thisBtn == "btn5"){ 
    click5 = true; 
    } 

    if(click1 == true && click2 == true && click3 == true && click4 == true && click5 == true){ 
    alert('Play that song!'); 
    var audioElement = document.createElement('audio'); 
    audioElement.setAttribute('src', 'https://www.soundjay.com/misc/sounds/bell-ringing-01.mp3'); 
    audioElement.play(); 


    } 

} 

도 있습니다 작업