如何获取数组的每个元素？ [关闭]

Posted 2023-03-08

【中文标题】如何获取数组的每个元素？ [关闭]

【英文标题】：How get each element of an Array? [closed]

【发布时间】：2021-09-08 06:58:53

【问题描述】：

我有一个 javascript function，它在每个 button 旁边插入一个 checkbox 类型的 input。当第一个复选框被点击时，其各自的按钮被禁用，并且该复选框在页面被刷新时保持不变，同样，当再次点击该复选框时，该按钮被重新启用并在页面刷新后保持。

我的目标是，当单击与按钮相关的复选框时，只有该按钮被禁用。发生的事情是只有第一个复选框触发function，当它被触发时，其他复选框也是。当我尝试单击第二个或第三个复选框时，此功能不起作用。

我认为这是因为forEach()。我需要的是让这个功能为每个按钮单独工作，并在页面刷新后保持复选框启用/禁用。

<div id="accordion">
  <% turmas.forEach((turma)=>  %>
    <div class="card">
      <div class="card-header" id="headingThree>">
        <h5 class="mb-0 d-flex">
          <div id="billing">
            <input type="checkbox" id="billing-checkbox" checked>
            <button class="btn btn-info text-white collapsed d-flex align-center" data-toggle="collapse" data-target="#<%= turma.nome %>" aria-expanded="false" aria-controls="<%= turma.nome %>" id="btn">
              <%= turma.nome %>
            </button>
          </div>
        </h5>
      </div>
    </div>
  <% ) %>

$(document).ready(function() 
  $('#billing-checkbox').prop('checked', localStorage.getItem('buttonDisabled') !== "disabled");
  toggleBilling(
    target: $('#billing-checkbox')[0]
  )
  $('#billing-checkbox').on('change', toggleBilling);
);

function toggleBilling(e) 
  $('#billing button').attr('disabled', !e.target.checked)
  localStorage.setItem('buttonDisabled', $('#billing button').attr('disabled'));

24/06/21 更新：

用户@RoryMcCrossan 创建了一个解决方案，使每个复选框为每个按钮单独工作，但是有一个问题，当按钮被禁用时，当尝试重新激活它时，它不会在谷歌浏览器上再次启用它。

jQuery($ => 
  $('.billing-checkbox').on('change', e => 
    $(e.target).next('button').prop('disabled', !e.checked);
  );
);

JSFiddle

这是允许复选框在刷新页面后保持启用/禁用的代码

$(document).ready(function() 
    $('.billing-checkbox').prop('checked', localStorage.getItem('buttonDisabled') !== "disabled");
    toggleBilling(
        target: $('.billing-checkbox')[0]
  )
  $('.billing-checkbox').on('change', toggleBilling);
);

function toggleBilling(e) 
    $('.billing input[type="button"]').attr('disabled', !e.target.checked)
    localStorage.setItem('buttonDisabled', $('.billing input[type="button"]').attr('disabled'));

JSFiddle

理想的情况是同时加入这两个功能，但我一直在尝试，但没有成功。

【问题讨论】：

链接中的代码损坏

你使用id的，改成类

@LawrenceCherone 你指的是id#headingThree>？

不，所有的 id，特别是用于选择器的那些

这能回答你的问题吗？ How does jQuery work when there are multiple elements with the same ID value?

【参考方案1】：

主要问题是因为循环构建 html 时，您在多个元素上重复相同的 id。要更正此问题，请删除 id 属性并改用 class。

您可以从那里更新您的 jQuery 代码以使用 DOM 遍历来查找与更改的复选框相关的 button 元素。在这种特定情况下，通过使用next() 方法：

jQuery($ => 
  $('.billing-checkbox').on('change', e => 
    $(e.target).next('button').prop('disabled', !e.checked);
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" />
<div id="accordion">
  <!-- repeated content \/ -->
  <div class="card">
    <div class="card-header headingThree">
      <h5 class="mb-0 d-flex">
        <div class="billing">
          <input type="checkbox" class="billing-checkbox" />
          <button class="btn btn-info text-white collapsed d-flex align-center" data-toggle="collapse" data-target="#<%= turma.nome %>" aria-expanded="false" aria-controls="turma.nome" id="btn">
            turma.nome
          </button>
        </div>
      </h5>
    </div>
  </div>
  <!-- repeated content /\ -->

  <div class="card">
    <div class="card-header headingThree">
      <h5 class="mb-0 d-flex">
        <div class="billing">
          <input type="checkbox" class="billing-checkbox" />
          <button class="btn btn-info text-white collapsed d-flex align-center" data-toggle="collapse" data-target="#<%= turma.nome %>" aria-expanded="false" aria-controls="turma.nome" id="btn">
            turma.nome
          </button>
        </div>
      </h5>
    </div>
  </div>

  <div class="card">
    <div class="card-header headingThree">
      <h5 class="mb-0 d-flex">
        <div class="billing">
          <input type="checkbox" class="billing-checkbox" />
          <button class="btn btn-info text-white collapsed d-flex align-center" data-toggle="collapse" data-target="#<%= turma.nome %>" aria-expanded="false" aria-controls="turma.nome" id="btn">
            turma.nome
          </button>
        </div>
      </h5>
    </div>
  </div>
  <div class="card">
    <div class="card-header headingThree">
      <h5 class="mb-0 d-flex">
        <div class="billing">
          <input type="checkbox" class="billing-checkbox" />
          <button class="btn btn-info text-white collapsed d-flex align-center" data-toggle="collapse" data-target="#<%= turma.nome %>" aria-expanded="false" aria-controls="turma.nome" id="btn">
            turma.nome
          </button>
        </div>
      </h5>
    </div>
  </div>
</div>

-- 更新--

鉴于您在下面关于需要在 localStorage 中保存多个复选框/按钮组合的状态的评论，您可以通过从复选框的状态构建一个数组并存储它来实现这一点。这是一个 jsFiddle 演示（因为 SO sn-ps 是沙盒并且无法访问 localStorage）

jsFiddle

【讨论】：

这部分解决了我的问题。现在他正在单独选择和禁用按钮，我对此表示赞赏，但之前的功能用于“记忆”复选框的行为，如果禁用，它会在重新加载页面时保持不变，如果启用相同的东西。我在 google chrome 上对其进行了测试，当我通过复选框禁用按钮时，当我再次单击它以重新激活按钮时，它也停止工作。

我更新了答案，向您展示如何做到这一点

现在完美运行。非常感谢！

【参考方案2】：

删除button 改用label 并使用css 使label 看起来像button。在label 中添加for 属性与button 中的id 相同，但请记住使每个id 不同，简单的方法是连接数组index 或id 这样的元素：

<label for="#<%= turma.id %><%= turma.nome %>"></label>
<input id="<%= turma.id %><%= turma.nome %>" value="<%= turma.nome %>">

如果您再次遇到问题，请提供您的评论。谢谢