根据点击更改索引答案

【问题标题】：changing the index according to click根据点击更改索引
【发布时间】：2020-06-02 13:50:07
【问题描述】：

我试图在每次点击时播放一张图片，我现在有两首歌和两张图片。每次我单击图像时，只会播放一首歌曲，因为现在索引为 0。我想根据我单击的图像播放不同的歌曲（我将来可能会添加更多图片，所以我正在寻找不涉及更改 JS 的解决方案）。我可以在索引中写什么（而不是 0）会根据我单击的图像而改变吗？

HTML：

<section id="imgsound">
<div class="imageCircle">
    <div id="bird">
        <img id="birdImg" class="circle" src="images/bird.jpg">
        <audio id="birdAudio" class="audio"><source src="sounds/bird.mp3" type="audio/mpeg"></audio>
    </div>
</div>
<div class="imageCircle">
    <div id="stream">
        <img id="streamImg" class="circle" src="images/stream.jpg">
        <audio id="birdAudio" class="audio"><source src="sounds/stream.mp3" type="audio/mpeg">   </audio>
    </div>
</div>

JS：

var audio;
function playAudio(){
    if (audio == false){
        $(this).css({"transform":"rotate(-360deg)"});
        $(".audio")[0].play();
        audio = true;
    }else{
        $(this).css({"transform":"rotate(360deg)"});
        $(".audio")[0].pause();
        audio = false;
    }
}
$(".imageCircle").click(playAudio);

【问题讨论】：

如果你把这个$(".audio")[0].play();改成这个$(this).find(".audio")[0].play();会发生什么
仅供参考：您可以将if (audio == false) 替换为if (!audio)

标签： javascript html jquery indexing

【解决方案1】：

您需要查找与单击的图像相对的音频元素，而不是通过全局选择器搜索它。我们可以使用 siblings() 之类的东西来做到这一点，只过滤音频元素。

我们还可以截断和简化代码。

let audio;
function playAudio() {
    $(this).css({"transform":"rotate("+(!audio ? -360 : 360)+"deg)"});
    $(this).siblings('audio')[!audio ? 'play' : 'pause']();
    audio = !audio;
}
$(".imageCircle").click(playAudio);

如果您不确定audio 元素始终是img 元素的兄弟元素，则可以转到.imageCircle 祖先并查看其中的内容。

    $(this).closest('.imageCircle').find('audio')[!audio ? 'play' : 'pause']();

【讨论】：

【解决方案2】：

您应该为此咨询event.target。有了它，您可以获得触发事件的元素的信息。例如，您可以从中获取节点的 id 或其他属性。

【讨论】：