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

Question

我如何通过在 jquery 中使用它来调用元素我正在做循环每个循环都有 div 有 2 个按钮播放和暂停我想在我按下播放和显示暂停时隐藏播放

    $("#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");
    
  });

Answer 1

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>

JavaScript：

$(".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();
});

Answer 2

您可以遍历按钮并使用 addEventListener() 为每个按钮指定一个事件监听器。
当按下按钮时，您可以使用$(this)和 next() prev() function 将切换功能应用于按下的按钮。此解决方案假定播放按钮始终位于停止按钮之前。

 const elements = [...$('div > button')] // initially hide the Pause buttons const pauseButtons = Array.from($('.pause')); pauseButtons.forEach((y) => { y.style.visibility = "hidden"; }) elements.forEach((x) => { x.addEventListener('click', function() { $(this).css("visibility", "hidden") $(this).next().css("visibility", "visible") }) x.addEventListener('click',function() { $(this).css("visibility", "hidden") $(this).prev().css("visibility", "visible") }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>DIV1 <button class="play">Play</button> <button class="pause">Pause</button> </div> <div>DIV2 <button class="play">Play</button> <button class="pause">Pause</button> </div> <div>DIV3 <button class="play">Play</button> <button class="pause">Pause</button> </div>