我如何通过在jquery中使用这个调用元素

Question

我如何在jquery中使用这个来调用元素我在做循环，每个循环都有div，有两个按钮播放和暂停我想隐藏播放当我按下播放并显示暂停

$("#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()给每个按钮一个eventListener。
当按钮被按下时，通过使用$(this)和next() prev()函数将切换功能应用于按下的按钮。这个解决方案假设播放按钮总是在停止按钮之前。

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>