Question

我有5张图片，每张图片都有一个在点击图片时播放的音频文件。

我想要在单击另一个图像时停止为一个图像播放的音频，然后播放该图像的音频。

$('.cl').click(function() {
  var DOMElem = $('.cs').get(0);
  DOMElem.paused ? DOMElem.play() : DOMElem.pause();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img class="cl" src="photo/198.jpg" />
</br>
<audio class="cs">
  <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
<img class="cl" src="photo/198.jpg" />
</br>
<audio class="cs">
  <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
<img class="cl" src="photo/198.jpg" />
</br>
<audio class="cs">
  <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>

Answer 1

每次都会获得第一个audio个对象。您需要获得与object

相关的img

$('.cl').click(function () {
   var DOMElem = $(this).next().next().get(0);
   DOMElem.paused ? DOMElem.play() : DOMElem.pause();
});

更好的方法是为每个图像和音频创建一个容器div，当您单击image时，您可以获得与容器相关的音频对象。

<div class="audioContainer">
        <img class="cl" src="photo/198.jpg" />
        </br>
        <audio class="cs">
            <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
        </audio>
    </div>
    <div class="audioContainer">
        <img class="cl" src="photo/198.jpg" />
        </br>
        <audio class="cs">
            <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
        </audio>
    </div>
    <div class="audioContainer">
        <img class="cl" src="photo/198.jpg" />
        </br>
        <audio class="cs">
            <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
        </audio>
    </div>
    <script>

         var DOMElem;
    $('.cl').click(function () {
        if (DOMElem) {
            if (!DOMElem.paused)
                DOMElem.pause();
        }
        DOMElem = $(this).parent().find('.cs').get(0);
        DOMElem.play();
        console.log(DOMElem);
    });
    </script>

一次播放音频音频文件

1 个答案: