Javascript 我如何在jquery中使用它来调用元素

在jquery im doing循环中如何调用元素每个循环有div有2个按钮play和pasue我想在按下play和show pause时隐藏play

    $("#play").click(function(){
   
    $(this).$("#play").css("display", "none");
    $(this).$("#pause").css("display", "block");
  });

  $("#pause").click(function(){
    $(this).$("#pause").css("display", "none");
    $(this).$("#play").css("display", "block");
    
  });

---

您可以使用addEventListener（）循环浏览按钮并为每个按钮提供一个eventListener。
按下按钮时，使用

$（this）

和next（）prev（）函数将切换功能应用于按下的按钮。此解决方案假定播放按钮始终位于停止按钮之前

const元素=[…$（'div>button'）]
//最初隐藏暂停按钮
const pauseButtons=Array.from（$（'.pause'））；
pauseButtons.forEach（（y）=>{
y、 style.visibility=“隐藏”；
})
元素。forEach（（x）=>{
x、 addEventListener（'单击'，函数（））{
$（this.css（“可见性”、“隐藏”）
$（this.next（）.css（“可见性”、“可见”）
})
x、 addEventListener（'单击'，函数（））{
$（this.css（“可见性”、“隐藏”）
$（this.prev（）.css（“可见性”、“可见”）
})
})

第一组
玩
暂停
第二组
玩
暂停
第三组
玩
暂停

HTML：

<div>
  <div>1
    <button class="play">play</button>
    <button class="pause">pause</button>
  </div>
  <div>2
    <button class="play">play</button>
    <button class="pause">pause</button>
  </div>
  <div>3
    <button class="play">play</button>
    <button class="pause">pause</button>
  </div>
</div>

---

问题是它适用于一个div，但其他div不是我如何将其用于指定特定div是的，仍然不是working@HossamThapet更新了我的答案。用户可以输入歌曲，所以说我有10首歌曲，我如何才能为每首歌曲暂停并播放它我有一个div循环每个用户输入一首歌曲它必须有两个按钮工作检查我的修改代码是它的工作。。。谢谢：D

$(".play").click(function(){
  $(this).parent().find('.pause').show();
  $(this).parent().find('.play').hide();
});

$(".pause").click(function(){
  $(this).parent().find('.pause').hide();
  $(this).parent().find('.play').show();
});