CSS 动画仅适用于第一个元素

Question

我正在使用神社模板来填充 table。对于每一行，我都希望在 table 单元格之一中有一个切换按钮。但是，只有第一个元素的切换按钮有效。当我点击任何其他按钮时，第一个元素的切换按钮会移动。我还没有找到任何可能的方法来解决这个问题，因此欢迎任何建议。

下面是与切换按钮相关的css和html；如果需要，我可以包括其余部分。

input[type="checkbox"] {
  width: 0;
  height: 0;
  visibility: hidden;
}

label {
  display: block;
  width: 50px;
  height: 30px;
  background-color: rgb(37, 42, 58);
  border-radius: 40px;
  position: relative;
  cursor: pointer;
  transition: 0.5s;
}

label::after {
  content: "";
  width: 15px;
  height: 15px;
  background-color: #eee;
  position: absolute;
  border-radius: 35px;
  top: 7.5px;
  left: 7.5px;
  transition: 0.5s;
}

input:checked+label:after {
  left: calc(100% - 10px);
  transform: translateX(-100%);
}

input:checked+label {
  background-color: #ffc94c;
}

<table class="pure-table pure-table-bordered">
  <thead id="table">
    <tr id="table-heading">
      <th rowspan="2" style="padding: 30px;">
        Name
      </th>
      <th colspan="3" style="border-bottom: 1px solid #cbcbcb">
        Automatic
      </th>
      <th rowspan="2" style="padding: 30px;">
        Last Seen
      </th>
      <th rowspan="2"></th>
    </tr>
    <tr id="table-heading">
      <th>
        Rider
      </th>
      <th>
        Trainer
      </th>
      <th>
        Owner
      </th>
    </tr>
  </thead>
  <tbody>
    <form>
      {% for entity in all_entities %}
      <tr id="table-cell">
        <td>
          <a class="pure-menu-link" href="#">
           {{  entity["name"]  }}
          </a>
        </td>
        <td>
          <input type="checkbox" name="switch" id="switch">
          <label for="switch"></label>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <button id="table-heading" class="pure-button" form="add-row">Edit
          </button>
        </td>
      </tr>
      {% endfor %}
    </form>
  </tbody>
</table>

Answer 1

问题是您所有的输入字段都具有相同的 id，因此您所有的 label for="switch" 都指向第一个开关复选框。

因此，您需要为每个开关设置不同的 id，并相应地调整每个标签的 for 属性。我不确定如何使用这个特定的模板引擎来做到这一点，但你想达到如下所示的效果。

旁注：您还应该为每个开关设置不同的 name，以便在提交表单时正确读取每个复选框的值。

input[type="checkbox"] {
  width: 0;
  height: 0;
  visibility: hidden;
}

label {
  display: block;
  width: 50px;
  height: 30px;
  background-color: rgb(37, 42, 58);
  border-radius: 40px;
  position: relative;
  cursor: pointer;
  transition: 0.5s;
}

label::after {
  content: "";
  width: 15px;
  height: 15px;
  background-color: #eee;
  position: absolute;
  border-radius: 35px;
  top: 7.5px;
  left: 7.5px;
  transition: 0.5s;
}

input:checked+label:after {
  left: calc(100% - 10px);
  transform: translateX(-100%);
}

input:checked+label {
  background-color: #ffc94c;
}

<table class="pure-table pure-table-bordered">
  <thead id="table">
    <tr id="table-heading">
      <th rowspan="2" style="padding: 30px;">
        Name
      </th>
      <th colspan="3" style="border-bottom: 1px solid #cbcbcb">
        Automatic
      </th>
      <th rowspan="2" style="padding: 30px;">
        Last Seen
      </th>
      <th rowspan="2"></th>
    </tr>
    <tr id="table-heading">
      <th>
        Rider
      </th>
      <th>
        Trainer
      </th>
      <th>
        Owner
      </th>
    </tr>
  </thead>
  <tbody>
    <form>
      <tr id="table-cell">
        <td>
          <a class="pure-menu-link" href="#">
           {{  entity["name"]  }}
          </a>
        </td>
        <td>
          <input type="checkbox" name="switch1" id="switch1">
          <label for="switch1"></label>
        </td>
        <td>
          <button id="table-heading" class="pure-button" form="add-row">Edit
          </button>
        </td>
      </tr>
      
      
      <tr id="table-cell">
        <td>
          <a class="pure-menu-link" href="#">
           {{  entity["name"]  }}
          </a>
        </td>
        <td>
          <input type="checkbox" name="switch2" id="switch2">
          <label for="switch2"></label>
        </td>
        <td>
          <button id="table-heading" class="pure-button" form="add-row">Edit
          </button>
        </td>
      </tr>
    </form>
  </tbody>
</table>

CSS 动画仅适用于第一个元素

CSS animation only works for the first element

html

css

jinja2