Question

我的问题是为js设置正确的格式，以使每个按钮在每个div（echo'';）部分显示更多或更少的内容。这只是一个逻辑部分，我无法弄清楚如何在我的代码中设置它以获得正常的运行功能。我尝试过的内容在脚本部分已注释掉。

我尝试过的事情：
如果我让代码保持原样，则按钮innerHTML文本会更改，但没有其他更改。

如果我更改

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

我遇到一个问题，即按钮innerHTML发生了变化，同时第一个按钮也打开了，但是类.show-less-content会被删除，而无论如何。

如果我设置了密码

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;
  }

<script>
  if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', ready)
  } else {
    ready()
  }
  function ready() {
    //var content = document.getElementsByClassName("show-less-content")[0];
    var content = document.getElementsByClassName("show-less-content");
    var showButton = document.getElementsByClassName("show-more");
    for (var i = 0; i < showButton.length; i++) {
      showButton[i].addEventListener('click', function(event){
        var buttonLessMore = event.target
        var cartItem = buttonLessMore.parentElement
        //var content = document.getElementsByClassName("show-less-content")[0];
        if (content.className == "open") {
          content.className = ""
          buttonLessMore.innerHTML = "Show More"
        } else {
          content.className = "open"
          buttonLessMore.innerHTML = "Show Less"
        }
      //content.classList.remove("open")
      //content.append(buttonLessMore)
      //content.className += "shop-item"
    })
  } 
</script>

<?php
  $sql = "SELECT `bestellnummer`, `name`, `preis`, `gewuerzart`, `allergieform`, `zutaten`, `kcal`, `menge`, `img` FROM `gerichte` LIMIT 2";
  $db_erg = mysqli_query( $con, $sql );
  if ( ! $db_erg ) { die("Ungültige Abfrage: $sql <hr>" . mysqli_error()); }
  if (mysqli_num_rows($db_erg) > 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">';
  echo          '<table>';
  echo              '<tr>'; 
  echo                      '<td>Gericht:</td>';
  echo                      '<td class="shop-item-title">'.$zeile['name'].'</td>';
  echo                  '</tr><tr>';
  echo                      '<td>Bestellnummer:</td>';
  echo                      '<td class="shop-item-title2">'.$zeile['bestellnummer'].'</td>';
  echo                  '</tr><tr>'; 
  echo                      '<td>Allergieinformation:</td>';
  echo                      '<td>'.$zeile['allergieform'].'</td>';
  echo                  '</tr><tr>'; 
  echo                      '<td>Gewürzart:</td>';
  echo                      '<td>'.$zeile['gewuerzart'].'</td>';
  echo                  '</tr><tr>'; 
  echo                      '<td>Zutaten:</td>';
  echo                      '<td>'.$zeile['zutaten'].'</td>';
  echo                  '</tr><tr>'; 
  echo                      '<td>Nährwert:</td>';
  echo                      '<td>'.$zeile['kcal'].'</td>';
  echo                  '</tr><tr>';
  echo                      '<td>Menge:</td>';
  echo                      '<td>'.$zeile['menge'].'</td>';
  echo                  '</tr>';    
  echo              '</table>';
  echo          '</div>';
  echo          '<button class="show-more">Show More</button>';
  echo      '</td>';
  echo      '<td class="tab-cfg-2">';
  echo          '<div>Preis:</div>'; 
  echo          '<div class="shop-item-price ">'.$zeile['preis'].'</div>'; 
  echo      '</td>';    
  echo      '<td class="tab-cfg-3">';
  echo          '<button class="btn btn-primary shop-item-button" >In den Warenkorb</button>';
  echo      '</td>';    
  echo  '</tr>'; 
  }
  } else {
  echo 'Es gibt keine Gerichte!';
  }
?>

Answer 1

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

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

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

代码序列：

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 {

然后我添加了一个功能

<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>

看看它是否有效：D

Answer 2

在for循环中使用事件侦听器通常会引起问题，因为只有在for循环中设置的最后一个事件侦听器才有效。相反，您可以在父元素的for循环之外添加事件侦听器，并获取触发事件的元素的ID。

解决超过2个按钮功能的问题

2 个答案: