我如何在 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>