切换问题。某些阵列没有切换答案

【问题标题】：Toggle Problems. Some array's is not toggling切换问题。某些阵列没有切换
【发布时间】：2022-01-06 07:56:00
【问题描述】：

为什么数组 2 不切换？

“-”切换，“+”不切换

php代码：

$html = '';
    $array = array('1' => 'Airport', '2' => 'Restaurant', '3' => 'Market');

    foreach ($array as $key => $name) {
        $x = $key;
            $html .= '<table class="pad-3"><tr>';
            $html .= '<td><a href=\'javascript:toggle("' . $x . '");\'>
                        <img id="' . $x . '_img_1" src="../img/expandable_1.gif" width="9" height="9"/>
                        <img id="' . $x . '_img_2" src="../img/expandable_2.gif" width="9" height="9" style="display:none"/> ' . $name . '</a>
                     </td>';
            $html .= '</tr></table>';
            $html .= '<div id="' . $x . '_div_1" style="margin-left:15px;display:none;">';

            $html .= '</div>';
    }
    echo $html;

javascript：

function toggle(type) {
var a = $('#' + type + '_div_1');
var b = $('#' + type + '_img_1');
var c = $('#' + type + '_img_2');

if (a.is(':visible')) {
    a.hide();
    b.show();
    c.hide();
} else {
    a.show();
    b.hide();
    c.show();
}

}

临时修复：我尝试将餐厅数组索引更改为 3。示例：“$array = array('1' => 'Airport', '3' => 'Restaurant', '4' => 'Market ');"

不知何故，当我将索引分配为 2 时，它不会切换。将索引设置为 2 时遇到问题

附加信息：当我在 js 上添加警告行时。当我点击餐厅时，警报会提示但仍不切换

【问题讨论】：

这是PHP问题，还是JS问题？由于切换只发生在浏览器中，也许您可以分享生成的标记以及您解决问题的尝试？
我无法重现您的问题。我运行了你的 PHP 代码，并用包含 +/- 的 span 替换了图像（因为我们没有你的图像），它工作得非常好（在 Chrome 中测试），jsfiddle.net/mw32xtL7

标签： javascript php html arrays

【解决方案1】：

你真的需要委派

我已经简化了整个事情——去掉了不必要的表格和图像

window.addEventListener("load",function() {
  document.getElementById("container").addEventListener("click",function(e) {
    const tgt = e.target.closest("a");
    if (tgt && tgt.classList.contains("toggle")) {
      e.preventDefault(); // stop link
      let isHidden = tgt.nextElementSibling.hidden; 
      tgt.nextElementSibling.hidden = !isHidden;
      tgt.querySelector("span.exp").classList.toggle("plus",!isHidden)
      tgt.querySelector("span.exp").classList.toggle("minus",isHidden)
    }
  })
})

.content {
  margin-left: 15px;
}

.pad-3 {
  padding: 3px
}

a.toggle {
  text-decoration: none
}

.exp {
  font-size: 12px;
  padding-right: 10px;
}

.exp.plus::after {
  content: "⊞"
}
.exp.minus::after {
  content: "⊟"
}

<div id="container">
  <a href="#" class="pad-3 toggle"><span class="exp plus"></span>Airport</a>
  <div class="content" hidden>Airport</div><br/>
  <a href="#" class="pad-3 toggle"><span class="exp plus"></span>Restaurant</a>
  <div class="content" hidden>Restaurant</div><br/>
  <a href="#" class="pad-3 toggle"><span class="exp plus"></span>Market</a>
  <div class="content" hidden>Market</div><br/>
</div>

PHP

<div id="container">
  <?php
    $array = array('1' => 'Airport', '2' => 'Restaurant', '3' => 'Market');
    foreach ($array as $key => $name) { ?>
    <a href="#" class="pad-3 toggle"><span class="exp plus"></span><?= $name ?></a>
    <div class="content" hidden>
      <?= $name ?>
    </div><br/>
    <? } ?>
</div>

【讨论】：