如何将PHP生成的元素ID传递给JavaScript并适配动态CSS？

背景 #

原本写了静态的显示/隐藏套餐描述代码，现在要通过PHP循环$items数组生成数量不固定的套餐元素，需要解决两个适配问题：

1. 适配动态元素的JavaScript逻辑 #

不用逐个传递item ID绑定事件，直接利用事件委托+DOM元素关系就能实现通用逻辑，不管生成多少个套餐都能生效：

修改后的JavaScript代码：

// 事件委托绑定到全局（推荐绑定到更接近的父容器，比如所有套餐的外层容器）
$(document).on('click', '.package-show', function() {
  // 找到当前按钮所属的套餐容器
  const $container = $(this).closest('.package-container');
  // 切换对应元素的显示状态
  $container.find('.package-description').show();
  $(this).hide();
  $container.find('.package-hide').show();
});

$(document).on('click', '.package-hide', function() {
  const $container = $(this).closest('.package-container');
  $container.find('.package-description').hide();
  $(this).hide();
  $container.find('.package-show').show();
});

2. 适配动态元素的CSS修改 #

把原来固定的ID和带数字的类改成通用类，这样不管生成多少个套餐，CSS样式都能复用：

修改后的CSS代码：

.package-container {
  padding: 20px;
}

.name {
  font-size: 22px;
  font-weight: bold;
  padding-bottom: 10px;
}

.package-show {
  cursor: pointer;
  display: block;
  padding-bottom: 10px;
}

.package-hide {
  cursor: pointer;
  display: none;
  padding-bottom: 10px;
}

.package-description {
  display: none;
}

对应的PHP循环代码 #

把原来带ID的类替换成通用类，保持结构清晰：

<?php foreach ($items as $item) { ?>
    <div class="package-container" id="packages-list-<?= $item->id ?>">
        <div class="name">Package <?= $item->id ?></div>
        <div class="package-show">View</div>
        <div class="package-hide">Hide</div>
        <div class="package-description">Package <?= $item->id ?> description</div>
    </div>
<?php } ?>

方案优势 #

• JavaScript用事件委托避免重复绑定，性能更优，新增元素无需额外修改代码；通过DOM关系查找元素，彻底摆脱对ID的依赖。
• CSS用通用类代替固定选择器，代码更简洁，完全适配动态生成的元素，不用为每个新ID调整样式。

内容的提问来源于stack exchange，提问作者Hector