hrefを取得してサウンドを再生する - javascript

私のコードはまったく動作しません。理由はわかりません。私がこのプログラムから欲しいのは、かなり単純です。私は、のタグをクリックして、特定のhrefを持っていて、このhrefの値の音が再生されます。hrefを取得してサウンドを再生する - javascript

<html> 
<head> 
    <title>Test</title> 
    <meta charset="windows-1250"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

</head> 
<body> 

    <a href="#00"><div class="box">00</div></a> 
    <a href="#01"><div class="box">01</div></a> 
    <a href="#02"><div class="box">02</div></a> 
    <a href="#03"><div class="box">03</div></a> 
    <a href="#04"><div class="box">04</div></a> 
    <a href="#05"><div class="box">05</div></a> 

    <script src="javs.js" type="text/javascript"></script> 
     </body> 
</html>

とJavaScript私はjqueryを使用していますが、これは次のように動作するはずです。この

var hrefsound = ""; 
$(".box").click(function() { 
var bhref = $(this).attr("href"); 
console.log(bhref); 
switch (bhref) { 
case "#00": 
hrefsound = new Audio("http://www.jaroslavhuss.cz/wp-  content/uploads/2017/01/seno_02_doprdele_prace.mp3"); 
    hrefsound.play(); 
    break; 
case "#01": 
    hrefsound = new Audio("http://www.jaroslavhuss.cz/wp-content/uploads/2017/01/seno_03_coura.mp3"); 
    hrefsound.play(); 
    break; 
case "#02": 
    hrefsound = new Audio("http://www.jaroslavhuss.cz/wp-content/uploads/2017/01/seno_04_hajzle.mp3"); 
    hrefsound.play(); 
    break; 
case "#03": 
    hrefsound = new Audio("http://www.jaroslavhuss.cz/wp-content/uploads/2017/01/seno_05_smejd.mp3"); 
    hrefsound.play(); 
    break; 
case "#04": 
    hrefsound = new Audio("http://www.jaroslavhuss.cz/wp-content/uploads/2017/01/seno_06_dobytku.mp3"); 
    hrefsound.play(); 
    break; 
case "#05": 
    hrefsound = new Audio("http://www.jaroslavhuss.cz/wp-content/uploads/2017/01/seno_07_se_pobleju.mp3"); 
    hrefsound.play(); 
    break; 

} 
});

次のようになります。

HTMLは次のようになります。私もいくつかを入れてconsole.logとhrefのは未定義として設定されています - 誰も知っている？

が

出典

2017-02-08 Jaroslav Huss

:-)あなたの助けをありがとう:-(あなたはdiv要素のクリックを処理し、それらを含むa要素からhref属性で動作するようにしようとしています。しかし、実際にクリックしたdivのhref属性を取得しようとしています。もちろん、divの要素にはhrefの属性がないため、undefinedが得られます。

が a要素にクリックハンドラを添付するようにコードを変更し

：もちろん

$("a[href]").click(function() {

あなただけのこれらのクラスを作成することができるように、そのセレクタは、すべての<a>要素をピックアップします：

$(".sound").click(function() {

を

div要素で何か他のことをしていない限り、それらの要素はまったく必要ありません。

ここで作業コードです：

var hrefsound = ""; 
 
// You want the sounds to play based on the href of the <a> that was clicked 
 
// so set up the click event handler on the <a> - The <div> elements are not required. 
 
$(".sound").click(function() { 
 
    var bhref = $(this).attr("href"); 
 
    console.log(bhref); 
 
    switch (bhref) { 
 
    case "#00": 
 
     hrefsound = new Audio("http://www.jaroslavhuss.cz/wp-content/uploads/2017/01/seno_02_doprdele_prace.mp3"); 
 
     hrefsound.play(); 
 
     break; 
 
    case "#01": 
 
     hrefsound = new Audio("http://www.jaroslavhuss.cz/wp-content/uploads/2017/01/seno_03_coura.mp3"); 
 
     hrefsound.play(); 
 
     break; 
 
    case "#02": 
 
     hrefsound = new Audio("http://www.jaroslavhuss.cz/wp-content/uploads/2017/01/seno_04_hajzle.mp3"); 
 
     hrefsound.play(); 
 
     break; 
 
    case "#03": 
 
     hrefsound = new Audio("http://www.jaroslavhuss.cz/wp-content/uploads/2017/01/seno_05_smejd.mp3"); 
 
     hrefsound.play(); 
 
     break; 
 
    case "#04": 
 
     hrefsound = new Audio("http://www.jaroslavhuss.cz/wp-content/uploads/2017/01/seno_06_dobytku.mp3"); 
 
     hrefsound.play(); 
 
     break; 
 
    case "#05": 
 
     hrefsound = new Audio("http://www.jaroslavhuss.cz/wp-content/uploads/2017/01/seno_07_se_pobleju.mp3"); 
 
     hrefsound.play(); 
 
     break; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="#00" class="sound">00</a> 
 
<a href="#01" class="sound">01</a> 
 
<a href="#02" class="sound">02</a> 
 
<a href="#03" class="sound">03</a> 
 
<a href="#04" class="sound">04</a> 
 
<a href="#05" class="sound">05</a>

は、

出典

2017-02-08 15:42:28

hrefを取得してサウンドを再生する - javascript

答えて

関連する問題