javascript - jQuery 选择数据属性并隐藏

Question

我有一个带有 ID 的按钮，单击该按钮时，我需要将按钮的 ID 与文档 data-id 属性相匹配，然后向相应的元素添加一个类。

JS Fiddle

this.$('.add-resource').click(function() {
  var testId = $(this).attr('id');
  alert(testId);
  $('#layoutCanvas').find("[data-id='" + testId + "']").addClass('hidden');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="btn btn-primary add-resource" id="567">Button</a>
<div id="layoutCanvas">
  <div data-id="567">
    Test 1
  </div>

  <div data-id="235">
    Test 2
  </div>
</div>

Answer 1

您的 .hidden 类未定义，因此添加了该类，但没有应用 css。

我只添加了 .hidden 类

this.$('.add-resource').click(function () {
     var testId = $(this).attr('id');
     //alert(testId);
     $('#layoutCanvas').find("[data-id='" + testId + "']").addClass('hidden');
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-primary add-resource" id="567">Button</button>


<div id="layoutCanvas">
    <div data-id="567">
        Test 1
    </div>
    
    <div data-id="235">
        Test 2
    </div>
</div>