选中时，只隐藏和显示第一个卡片按钮，但不与其他按钮一起使用

Question

我用sql中的ojct制作物品卡，并用foreach创建卡片。当我按下一张卡片时，它会选择带有红色边框的卡片，购买按钮会变为编辑蚂蚁删除。但它只适用于第一张牌，其他牌不起作用，我找不到原因。

<?php $i = 0;  ?>
<div class="container marketing">
<?php foreach ($devilRooms as $devilRoom) { ?>
<?php $i++;  ?>
<div class="card optionsecoptions" id="card" style="width: 18rem;">
<?php
echo '<img class="bd-placeholder-img bd-placeholder-img-lg feature-image img-fluid mx-auto" width="500" height="500" src="img/nr' . $i . '.png" alt="">';
?>
<div class="card-body">
<h5 class="card-title">
<?= $devilRoom->brand ?>
</h5>
<h5 class="card-title">
<?= $devilRoom->item ?>
</h5>
<hr>
<p>
<?= $devilRoom->descript ?>
</p>
<hr>
<p class="price">
<?= $devilRoom->price ?>$</p>
</div>
<div class="card-body">
<form class="button" id="edit" action="" method="post">
<input type="hidden" name="id" value="<?= $devilRoom->id ?>">
<button type="submit" name="edit" class="btn btn-primary">edit</button>
</form>
<br>
<form class="button" id="destroy" action="" method="post">
<input type="hidden" name="id" value="<?= $devilRoom->id ?>">
<button type="submit" name="destroy" class="btn btn-danger">delete</button>
</form>
<form class="button" id="buy" action="" method="post">
<input type="hidden" name="id" value="<?= $devilRoom->id ?>">
<button type="submit" name="buy" class="btn btn-success">buy</button>
</form>
</div>
</div>
<?php } ?>
</div>
<script>
document.body.addEventListener('click', function(event) {
var closestOption = findClosestByClassName(event.target, 'optionsecoptions');
if (closestOption) {
var selectedEl = document.querySelector(".selected");
if (selectedEl && selectedEl !== closestOption) {
selectedEl.classList.remove("selected");
}
closestOption.classList.toggle("selected");
}
});

const btn = document.getElementById('card');
btn.addEventListener('click', () => {
const edit = document.getElementById('edit');
const destroy = document.getElementById('destroy');
const buy = document.getElementById('buy');
if (edit.style.display === 'none' && destroy.style.display === 'none' && buy.style.display === 'block') {
edit.style.display = 'block';
destroy.style.display = 'block';
buy.style.display = 'none';

} else {
edit.style.display = 'none';
destroy.style.display = 'none';
buy.style.display = 'block';
}
});

function findClosestByClassName(el, cls) {
while (!el.classList.contains(cls)) {
el = el.parentNode;
if (!el) {
return null;
}
}
return el;
}
</script>

我添加了一个视频它是如何工作的

所有这些都应该和第一个一样工作

Answer 1

在<?php foreach循环的开始附近，您有

<div class="card optionsecoptions" id="card" style="width: 18rem;">

使用id＝"；卡片">表示您正在为每张卡重复此id。id在页面上必须是唯一的。您的文档.getElementById('card'(；只得到第一张，所以第一张卡是唯一一张得到事件处理程序的卡；"仅隐藏并显示第一卡片按钮"；。

<form class="button" id="edit" ...>和循环中使用id的任何地方都会遇到类似的问题。

解决这个问题的一种方法是消除所有这些id并使用类，然后可能使用document.querySelectorAll('.some.css.selector')来代替document.getElementById

我要省略很多，但你目前的基本结构减去id的使用是

<div class="card card-trigger"> <!-- I'm adding class "card-trigger" -->
<div class="card-body">
<!-- some <h5>s and <p>s -->
</div><!-- card-body -->
<div class="card-body">
<button type="submit" name="edit" class="btn btn-primary">edit</button>
<button type="submit" name="delete" class="btn btn-primary">delete</button>
<button type="submit" name="buy" class="btn btn-primary">buy</button>
</div><!-- card-body -->
</div>

现在。。。

const btn = document.getElementById('card');
btn.addEventListener('click', () => { .......

变成。。。

const allButtons = document.querySelectorAll('.card-trigger');
allButtons.forEach(b => b.addEventListener('click', (e) => {
// added param 'e' for the event, you can use e.target to find what was clicked
});

此allButtons.forEach(...)为每张卡片添加了一个点击事件处理程序。

事件处理程序的其余部分基本保持不变，除了你不能使用id来获得像const edit = document.getElementById('edit');这样的东西，但你可以使用卡上的querySelector来查找该特定卡中的按钮(它不必是"document.getElementById&"或"document.querySelectorAll&"——你可以使用"somediv.querySelector All"来只查找该somediv中的东西(
被点击是"；e.target"；因此您可以使用CCD_ 11来查找"；购买"；单击的卡片中的按钮。

如果你有大量的卡片，那么在每一张卡片上添加一个处理程序可能会占用大量资源，你可能想了解事件委派，而不是使用这种方法。