Javascript 正确附加嵌入播放机时出现问题_Javascript_Jquery_Html_Css

Javascript 正确附加嵌入播放机时出现问题

javascript jquery html css

Javascript 正确附加嵌入播放机时出现问题,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个带有一些图标的网页，比如火、咖啡杯、汽车。这里的主要思想是，当用户单击这些图标时，我希望根据单击的图标播放特定的环境声音。这里的问题是，我不能以我想要的方式将玩家正确地嵌入无序列表中例如，在单击任何图标时，会播放交通环境声音，即使从未单击过相应的交通图标。我不太确定我做错了什么。任何帮助都将不胜感激 <body> <nav class="main-nav"> <h3 class="nav-title">Trancool<

我有一个带有一些图标的网页，比如火、咖啡杯、汽车。这里的主要思想是，当用户单击这些图标时，我希望根据单击的图标播放特定的环境声音。这里的问题是，我不能以我想要的方式将玩家正确地嵌入无序列表中

例如，在单击任何图标时，会播放交通环境声音，即使从未单击过相应的交通图标。我不太确定我做错了什么。任何帮助都将不胜感激

<body>
    <nav class="main-nav">
        <h3 class="nav-title">Trancool</h3>
        <ul class="nav-list">
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>
    <div class="main-content">
        <header class="main-header">
            <h1>Trancool</h1>
        </header>
        <div class="primary-content">
            <ul class="song-list">
                <li class="play icons"><i class="coffee fa fa-coffee fa-trancool-icons" aria-hidden="true"></i></li>
                <li class="play icons"><i class="traffic fa fa-car fa-trancool-icons" aria-hidden="true"></i></li>
                <li class="play icons"><i class="rain fa fa-tint fa-trancool-icons" aria-hidden="true"></i></li>
                <li class="play icons"><i class=" fire fa fa-fire fa-trancool-icons" aria-hidden="true"></i></li>
            </ul>
        </div>
    <div>
    <footer class="main-footer">
    <footer>
    <script src="https://code.jquery.com/jquery-3.1.0.js"   integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="   crossorigin="anonymous"></script>
    <script src="js/trancool.js" type="text/javascript"></script>
</body>









$('.song-list').on('click', 'i', function(event){
    if($(event.target.className === 'coffee')){
        if($('embed').length === 0){
            $(this).append('<embed id="embed_player" src="audio/cafe.wav" autostart="true" hidden="true"></embed>')
        }
        else{
            $('embed').remove();
        }
    }

    if($(event.target.className === 'rain')){
        if($('embed').length === 0){
            $(this).append('<embed id="embed_player" src="audio/rain.mp3" autostart="true" hidden="true"></embed>')
        }
        else{
            $('embed').remove();
        }
    }

    if($(event.target.className === 'traffic')){
        if($('embed').length === 0){
            $(this).append('<embed id="embed_player" src="audio/traffic.mp3" autostart="true" hidden="true"></embed>')
        }
        else{
            $('embed').remove();
        }
    }

});


Trancool

家
关于
接触

Trancool






$（'.song list'）。在（'click'，'i'，函数（事件）{
if（$（event.target.className==='coffee'））{
如果（$（'embed'）。长度==0）{
$（this.append（“”）
}
否则{
$（'embed'）.remove（）；
}
}
如果（$（event.target.className=='rain'））{
如果（$（'embed'）。长度==0）{
$（this.append（“”）
}
否则{
$（'embed'）.remove（）；
}
}
if（$（event.target.className==‘流量’）{
如果（$（'embed'）。长度==0）{
$（this.append（“”）
}
否则{
$（'embed'）.remove（）；
}
}
});

从js代码中删除嵌入，并在html中添加一次，将icon类更改为id，然后重试此操作

var声音={
“coffee”：“audio/cafe.wav”，
“rain”：“audio/rain.mp3”，
“流量”：“音频/流量.mp3”
};
$（'.song list'）。在（'click'，'i'，函数（事件）{
var file=sounds[event.target.id]；
$（'embed'u player'）.attr（'src'，file）；
});

Trancool

家
关于
接触

Trancool





从js代码中删除嵌入，并在html中添加一次，将icon类更改为id，然后重试此操作

var声音={
“coffee”：“audio/cafe.wav”，
“rain”：“audio/rain.mp3”，
“流量”：“音频/流量.mp3”
};
$（'.song list'）。在（'click'，'i'，函数（事件）{
var file=sounds[event.target.id]；
$（'embed'u player'）.attr（'src'，file）；
});

Trancool

家
关于
接触

Trancool





您可以使用audio（）
api单击播放这些文件。这里有一个例子

var lis=document.getElementsByTagName（'li'）；
对于（变量i=0；i

文件1
file2
您可以使用audio（）
api单击播放这些文件。这里有一个例子

var lis=document.getElementsByTagName（'li'）；
对于（变量i=0；i

文件1
file2
谢谢，这很有效！现在的问题是，如果音频正在播放，则尝试通过单击同一图标来停止音频。我在这方面有困难…谢谢你，这成功了！现在的问题是，如果音频正在播放，则尝试通过单击同一图标来停止音频。我在这方面有困难。。。