javascript - 使用 Javascript 将禁用属性添加到 DataList 中的按钮？

Question

我有 3 个按钮 test1,test2,test3 它们属于 DataList 并且数据列表有 10 个或 20 个原始数据，这取决于它。我想要做的是在 test2 和 test3 上有属性 disabled我想在 test1 上删除 test2 的属性点击并在 test2 移除 test3 的属性，然后在 test3 上再次点击 add the attribute to all 按钮.Iam 能够像我希望的那样删除和添加属性，但问题是因为当 test1 被点击时按钮位于 datalist 内正在点击 test2。我如何为我尝试过的每个原始文件实现它，如下所示无法通过

$(document).on('click', '#test1', function() {
  document.getElementById('test2').removeAttribute('disabled');
})

$(document).on('click', '#test2', function() {
  var elementHtml = document.querySelectorAll("[data-id]")[0].innerHTML;
  alert(elementHtml);
  addattribute(elementHtml);
});

function addattribute(test) {
  var dataidd = test;
  document.querySelectorAll("[data-idd]").addAttribute('disabled');
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="test1" data-id="test1" style="width:100px;height:30px;">
test1
</button>
<button id="test2" disabled="true" data-id="test1" style="width:100px;height:30px;">
test2
</button>
<button id="test3" style="width:100px;height:30px;">
compare
</button>

raw 中的每个按钮都有相同的 data-id 所以我尝试使用它但运气不好我怎么能实现这个

Answer 1

您不能对按钮使用 id，因为 DataList 和 id 中有几行(我认为 raw 是行的拼写错误)页面只能使用一次。所以，你可以使用 class 作为这个职位。
您将 id 或 data-index 属性添加到每行的 div 元素以识别它们，但对于此位置不需要。请检查以下代码库。

$(document).on('click', '.btn-test1', function() {
  $(this).siblings('.btn-test2').removeAttr('disabled');
})

$(document).on('click', '.btn-test2', function() {
  $(this).siblings('.btn-test3').removeAttr('disabled');
});

$(document).on('click', '.btn-test3', function() {
  $(this).siblings().attr('disabled', true);
});

<div data-index="0">
  <button class="btn-test1" style="width:100px;height:30px;">
    test1
  </button>
  <button class="btn-test2" disabled="true" style="width:100px;height:30px;">
    test2
  </button>
  <button class="btn-test3" disabled="true" style="width:100px;height:30px;">
    compare
  </button>
</div>
<div data-index="1">
  <button class="btn-test1" style="width:100px;height:30px;">
    test1
  </button>
  <button class="btn-test2" disabled="true" style="width:100px;height:30px;">
    test2
  </button>
  <button class="btn-test3" disabled="true" style="width:100px;height:30px;">
    compare
  </button>
</div>
...
<div data-index="9">
  <button class="btn-test1" style="width:100px;height:30px;">
    test1
  </button>
  <button class="btn-test2" disabled="true" style="width:100px;height:30px;">
    test2
  </button>
  <button class="btn-test3" disabled="true" style="width:100px;height:30px;">
    compare
  </button>
</div>