如何用javascript製作狗皮

-1

我想讓它在鼠標懸停在狗的照片上時能聽到他的樹皮。我想出瞭如何手動完成，但現在我試圖在循環中自動化它，以便代碼保持乾淨。如何用javascript製作狗皮

我給圖像和聲音相應的ID，以便我可以創建一個循環，在'圖像'和'聲音'的末尾添加一個數字。這樣我可以對＃image1.mouseenter播放＃sound1和＃image2.mouseenter播放＃sound2說。如果使sesne

here is the jsfiddle I created. ，這裏是我寫的劇本：

var i; 
for (i = 1; i<=3; i++){ 
    var barking = $("#sound"+i)[0]; 
    $("#image"+i).mouseenter(function(){ 
    barking.play();}); 
    $("#image"+i).mouseleave(function(){ 
    barking.pause();}); 
}

來源

2017-04-22 KaZ

那麼問題是什麼？ – Pointy

''！ – charlietfl

你沒有在JSFiddle中包含jQuery。循環中的'var barking'不會像你想象的那樣工作：它會在每次迭代時覆蓋以前的值。 – Xufox

您需要關閉使傳遞給事件處理程序

下面當i變量有正確的值是單向的，而這裏是幾個：JavaScript closure inside loops

for (var i = 1; i <= 3; i++) { 
 
    (function(j) { 
 
    $("#image" + j).mouseenter(function() { 
 
     $("#sound" + j)[0].play(); 
 
    }); 
 
    $("#image" + j).mouseleave(function() { 
 
     $("#sound" + j)[0].pause(); 
 
    }); 
 
    })(i); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="image1" src="https://www.rocketdogrescue.org/wp-content/uploads/2013/09/DSC_0718.png" width="400px"> 
 
<img id="image2" src="https://www.rocketdogrescue.org/wp-content/uploads/2013/09/lightening.jpg" width="400px"> 
 
<img id="image3" src="https://www.rocketdogrescue.org/wp-content/uploads/2013/09/pet-food-express.jpg" width="400px"> 
 

 
<audio id="sound1" preload="auto" loop="loop"> 
 
    <source src="http://soundbible.com/mp3/Dogs Barking-SoundBible.com-625577590.mp3"> 
 
</audio> 
 

 
<audio id="sound2" preload="auto" loop="loop"> 
 
    <source src="http://soundbible.com/mp3/Dog Woof-SoundBible.com-457935112.mp3"> 
 
</audio> 
 

 
<audio id="sound3" preload="auto" loop="loop"> 
 
    <source src="http://soundbible.com/mp3/dog-howling-yapping-daniel_simon.mp3"> 
 
</audio>

來源

2017-04-23 00:03:59 LGSon

你做到了!!!!!非常感謝！！它在這裏工作：[鏈接]（http://urbanmistletoe.com/test/index_test.html） – KaZ

@KaZ謝謝，雖然我仍然認爲[_Brad's answer_]（http://stackoverflow.com/a/43565954/2827823）值得考慮，因爲它給你更簡單，更易維護的代碼 – LGSon

一個更好的方式來做到這將是對你的標籤數據屬性，指定要玩什麼聲音。然後，有一個簡單的處理程序。

在HTML：

<div class="dogs"> 
    <img src="dog.jpg" data-hover-sound="dog.mp3" /> 
</div>

然後，在你的JavaScript：

$('.dogs').on('mouseenter', '[data-hover-sound]', function() { 
    var audio = new Audio($(this).attr('data-hover-sound')); 
    audio.play(); 
});

未經檢驗的，但這樣的事情應該工作。基本上，您在.dogs的容器上添加一個處理器，並僅過濾僅有懸停聲音的標籤。

或者，你可以使用$('[data-hover-sound]')，但如果你有很多這些，這將創建很多事件來觀察。這是一種折衷，因爲在父元素上有一個事件處理程序意味着如果有很多沒有有聲音的其他元素，它將不必要地觸發。

此外，當你有這個工作，看看油門和/或去抖動。

來源

2017-04-23 00:02:10 Brad

謝謝！我會試試這個。我對此很陌生，所以我不確定自己的理解，但我認爲這將適用於不同狗的不同聲音。 – KaZ

@KaZ整個觀點是，你在你的標記中保持你的狗的聲音參考（就像你對你的狗圖像做的一樣）。 JavaScript不必知道或關心這些URL是什麼。是的，它可以處理任何你想要的聲音。該URL來自標記。 – Brad

加1爲好，簡單易維護的解決方案 – LGSon

如何用javascript製作狗皮

回答

相關問題