HTML与JavaScript中如何为大量元素和按钮自动分配ID避免手动编号

核心逻辑是取消手动按序号分配类名和重复写事件的模式，统一用相同类名 + 属性关联绑定对应内容区，新增元素无需修改JS代码。

改造说明 #

1. 所有交互按钮统一使用同一个类名hover-btn，不需要加数字后缀
2. 按钮与对应内容区的关联直接复用原有a标签的href属性值（即内容区ID），无需新增额外属性
3. 交互状态（persist）直接存储在对应按钮元素的自定义属性中，不需要单独声明多个全局变量
4. JS通过批量遍历的方式统一为所有按钮绑定事件，逻辑只需要写一次

改造后代码 #

HTML代码 #

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <main>
    <div class="container" id="customTab">
      <ul class="nav " style="display: flex; justify-content: space-around; border: none;">
        <!-- 按钮统一用hover-btn类，不需要加数字后缀 -->
        <li><a href="#tab1default" data-toggle="collapse"><span class="hover-btn">Water</span></a></li>
        <li><a href="#tab2default" data-toggle="collapse"><span class="hover-btn">soil</span></a></li>
        <!-- 新增按钮直接按此格式添加即可，不需要修改JS -->
        <!-- <li><a href="#tab3default" data-toggle="collapse"><span class="hover-btn">air</span></a></li> -->
      </ul>
    </div>
    <div class="tab-content">
      <div>
        <div class="tab-pane fade" id="tab1default">
          <div class="flex ">
            <ul class="nav nav-tabs">
              <li data-toggle="tab"><span class="btn btn-info">1</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-pane fade" id="tab2default">
      <div class="flex">
        <div class="panel with-nav-tabs panel-default">
          <div class="panel-heading">
            <ul class="nav nav-tabs">
              <li><a href="#tab3default1" data-toggle="tab"><span class="btn btn-info">6</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增内容区直接按此格式添加，ID和对应a标签的href一致即可 -->
    <!-- <div class="tab-pane fade" id="tab3default">...</div> -->
  </main>
</body>
</html>

CSS代码 #

#customTab a {
  padding: 0;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
}
@media (max-width: 576px) {
  .container {
    padding: 0;
  }
  .btn {
    padding: 3px 6px;
    font-size: 12px;
  }
  .flex .panel-default {
    margin-right: 4px;
  }
  .flex .panel-default>.panel-heading {
    padding: 0;
  }
  .flex .panel-default>.panel-body .btn:last-child {
    margin-top: 4px;
  }
}
.btn-dark {
  background-color: #343a40;
  color: #fff;
}
.btn-dark:hover,
.btn.focus,
.btn:focus {
  color: #fff;
}
.btn.focus,
.btn:focus,
.btn:active,
.btn:hover,
.active>a .btn {
  color: #fff;
  background: blue;
}
.nav-tabs {
  border: none;
}
/* 所有按钮共用这一套样式，不需要写多套 */
.hover-btn {
  background-image: url(air.jfif);
  background-size: cover;
  color: #000;
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hover-btn:hover {
  background-image: url(air.jfif);
  background-size: cover;
  color: #000;
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.9;
}

JS代码 #

$(document).ready(function() {
  // 遍历所有hover-btn统一绑定事件
  $(".hover-btn").each(function() {
    // 获取对应内容区ID
    const targetId = $(this).parent("a").attr("href");
    const $targetEl = $(targetId);
    // 状态存储在按钮自身属性中，不需要声明多个全局变量
    $(this).data("persist", false);

    // 点击事件
    $(this).click(function(e) {
      e.stopPropagation();
      $(this).data("persist", !$(this).data("persist"));
    });

    // 鼠标移入事件
    $(this).mouseenter(function(e) {
      e.preventDefault();
      $targetEl.removeClass("collapse").addClass("fade in active");
    });

    // 鼠标移出事件
    $(this).mouseleave(function(e) {
      e.preventDefault();
      if (!$(this).data("persist")) {
        $targetEl.addClass("collapse").removeClass("fade in active");
      }
    });
  });
});

改造优势 #

• 新增元素仅需要编写对应HTML结构，不需要修改JS代码，不需要手动分配编号类名
• 代码冗余度大幅降低，仅保留一套事件逻辑，维护成本低
• 支持无上限扩展按钮数量，不会造成JS代码体积线性增长

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