Question

我有3个按钮 test1，test2，test3 ，它们属于DataList，数据列表有10或20个原始数据。我想做的是在 test2 和 test3 上具有我要设置的属性disabled删除 test2 的属性，方法是单击 test1 ，然后单击 test2 < / strong>删除 test3 的属性，然后在 test3 上单击属性，再次将其添加到所有按钮。删除并添加属性，但问题是因为单击 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>

原始按钮中的每个按钮都具有相同的data-id，所以我尝试使用它，但是运气不好，我怎么能做到这一点

Answer 1

您不能将id用于按钮，因为DataList中有多行（我认为raw是行的拼写错误），id仅应用于一次。页。因此，您可以在此位置使用class。
您可以在每行的div元素中添加id或data-index属性，以标识它们，但是此位置不需要此属性。请检查以下代码库。

$(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>

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

1 个答案: