javascript - 使用 JavaScript 显示和隐藏具有相同名称的多个项目的 ID

Question

这个问题已经有答案了:

jQuery ID selector works only for the first element (7 个回答)

已关闭 3 年前。

问题是它只隐藏/显示第一个元素。我希望该按钮适用于所有元素。

这里是开发者页面上的公共(public)接口(interface):https://dev.itf.njszt.hu/szoftver-termekek

$(document).ready(function(){
  $("#flip36090").click(function(){
    $("#panel36090").toggle("slow");
  });
});

.show {
    display: block !important;
}
.show-hide{
    display: block;
    border: 1px solid;
    background: aliceblue;
    padding-left: 2px;
    font-size: small;
    width: 100px;
    cursor: pointer;
    color:#000;
}
button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span id="mutat">
    Futó Iván<span class="show"></span> </span>
  <span id="mutat">
    Szeredi János<span class="show"></span> </span>
  <span id="mutat">
    Pásztor Zoltán<span class="show"></span> </span>
  <span id="panel36090" style="display: none;">
    Keresztély Mária<span class="show"></span> </span>
  <span id="panel36090" style="display: none;">
    Boda Elena<span class="show"></span> </span>
  <span id="panel36090" style="display: none;">
    Kacsuk Péter<span class="show"></span> </span>
  <span id="panel36090" style="display: none;">
    Ferenczi Szabolcs<span class="show"></span> </span>
  <span id="flip36090" class="show-hide button">Show/Hide</span>
</div>

Answer 1

HTML 页面上不应有重复的 ID。使用类来代替。将此类添加到您的 HTML 范围

$(document).ready(function(){
  $("#flip36090").click(function(){
    $(".panel36090").toggle("slow");
  });
});