Question

我需要一些脚本来帮助触发音频剪辑。在页面上有五个图标。一旦点击了所有五个，就应播放一个音频剪辑。这是下图：

这是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>

JavaScript代码：

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


     }

 }

还有一个有效的小提琴here

页面变量onclick可触发音频剪辑

1 个答案: