Javascript 解决2个以上按钮功能的问题

我的问题是为js设置正确的表单，让每个按钮或多或少地显示每个div（echo“”；）部分。这只是一个逻辑部分，我不知道如何在代码中设置它以获得正常运行的函数。我尝试的内容在脚本部分被注释掉了

我的尝试：
如果我让代码保持原样，HTML文本中的按钮会改变，但其他内容不会改变

如果我改变主意

var content = document.getElementsByClassName("show-less-content")[0];

我遇到的问题是，按钮innerHTML发生了变化，并且第一个按钮也打开了，但是class.show less内容会因过度渲染或其他原因而被删除，仅此而已

如果我设置代码

var content = document.getElementsByClassName("show-less-content")[0];

在for循环中，我可以打开div一次。我首先单击的每个按钮都会打开第一个div。我在第二个按钮上单击的每个按钮都会打开第二个div，这就失去了类的格式化 等等……
如何正确设置javascript部分，使每个按钮在每次单击时或多或少地显示？thx，br

<style>
  .show-less-content { 
    min-width:          100%;
    width:              100%;
    background:         #fff;
    padding:            0px;
    padding-top:        0;
    font-family:        calibri;
    font-size:          18px;
    color:              #444;
    margin:             0;
    max-height:         105px;
    overflow:           hidden;
    -webkit-transition: max-height 0.7s;
    -moz-transition:    max-height 0.7s;
    transition:         max-height 0.7s;
  }
  .open{
    max-height:         100%;
    -webkit-transition: max-height 0.7s;
    -moz-transition:    max-height 0.7s;
    transition:         max-height 0.7s;
  }

.显示较少的内容{
最小宽度：100%；
宽度：100%；
背景：#fff；
填充：0px；
填充顶部：0；
字体系列：calibri；
字号：18px；
颜色：#444；
保证金：0；
最大高度：105px；
溢出：隐藏；
-webkit过渡：最大高度0.7s；
-moz过渡：最大高度0.7s；
过渡：最大高度0.7s；
}
.打开{
最大高度：100%；
-webkit过渡：最大高度0.7s；
-moz过渡：最大高度0.7s；
过渡：最大高度0.7s；
}

如果（document.readyState=='loading'）{
document.addEventListener（'DOMContentLoaded'，ready）
}否则{
就绪（）
}
函数就绪（）{
//var content=document.getElementsByClassName（“显示较少的内容”）[0]；
var content=document.getElementsByClassName（“显示较少的内容”）；
var showButton=document.getElementsByClassName（“显示更多”）；
对于（变量i=0；i

在for循环中使用事件侦听器通常会导致问题，因为只有在for循环中设置的最后一个事件侦听器将处于活动状态。

---

相反，您可以在父元素的for循环之外添加一个事件侦听器，并获取触发事件的元素的id。

好的，我稍微更改了代码以获得相同的结果

首先：我添加一个计数器，操纵按钮和div类

echo        '<div class="show-less-content" id="Nr'.$counter.'" >';

echo'；

代码顺序：

if (mysqli_num_rows($db_erg) > 0) {
  $counter = 0;
  while ($zeile = mysqli_fetch_assoc($db_erg)) {
  echo  '<tr>'; 
  echo      '<td class="tab-cfg"><img class="myImg" src ="'. $zeile['img'] .'"></td>';
  echo      '<td class="tab-cfg td-content" width="70%">';
  echo          '<div class="show-less-content" id="Nr'.$counter.'" >';
  echo          '<table>';
  ..
  .
  echo          '<button class="show-more" onclick="gggggg(Nr'.$counter.')">Show More</button>';
  ..
  .
  echo  '</tr>'; 
  $counter++;
}
} else {

if（mysqli\u num\u行（$db\u erg）>0）{
$counter=0；
而（$zeile=mysqli\u fetch\u assoc（$db\u erg））{
回声'；
回声'；
回声'；
回声'；
回声'；
..
.
回声“显示更多”；
..
.
回声'；
$counter++；
}
}否则{

然后我添加了一个函数

<script>
  function gggggg(x) {
    if ($(x).hasClass("open") == true ) {
      x.classList.remove("open")
      console.log("closed")
    } 
    else {
      x.classList.add("open")
      console.log("open")
    }
  }
</script>

函数gggg（x）{
if（$（x）.hasClass（“打开”）==true）{
x、 类列表。删除（“打开”）
控制台日志（“关闭”）
} 
否则{
x、 类列表。添加（“打开”）
控制台日志（“打开”）
}
}

---

看看它是如何工作的：D

这就是问题所在。我不知道如何设置正确的表单。我不明白atm是var x=document.getElementsByClassName（“显示较少的内容”）的正确工作表单。你有没有举个例子，因为如果我尝试使x[i]无效？

<script>
  function gggggg(x) {
    if ($(x).hasClass("open") == true ) {
      x.classList.remove("open")
      console.log("closed")
    } 
    else {
      x.classList.add("open")
      console.log("open")
    }
  }
</script>