Question

我遇到一个问题，我需要能够使用班级.this_table隐藏所有其他表格（点击时），另外隐藏最近的父div .bootstrap-table。到目前为止，我能够隐藏所有其他表，但父div仍然存在。我尝试了添加.closest('.bootstrap-table')的几种变体，但我无法使其发挥作用。

HTML

<a class="report" data-id="table-javascript-1">link1</a>
<a class="report" data-id="table-javascript-2">link2</a>
<a class="report" data-id="table-javascript-3">link3</a>

<div class="bootstrap-table">
    <table class="this_table" id="table-javascript-1"></table>
</div>
<div class="bootstrap-table">
    <table class="this_table" id="table-javascript-2"></table>
</div>
<div class="bootstrap-table">
    <table class="this_table" id="table-javascript-3"></table>
</div>

的 JQUERY

$(document).on('click', '.report', function() {
    $('.this_table').not('#'+$(this).attr('data-id')).closest('.bootstrap-table').hide();
});

Answer 1

需要添加一行显示所有表格然后隐藏（）

＆＃13;

$(document).on('click', '.report', function() {
  $('.bootstrap-table').show()// add this to show all tables before hiding
  $('.this_table').not('#' + $(this).attr('data-id')).closest('.bootstrap-table').hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="report" data-id="table-javascript-1">link1</a>
<a class="report" data-id="table-javascript-2">link2</a>
<a class="report" data-id="table-javascript-3">link3</a>

<div class="bootstrap-table">
  <table class="this_table" id="table-javascript-1">1</table>
</div>
<div class="bootstrap-table">
  <table class="this_table" id="table-javascript-2">2</table>
</div>
<div class="bootstrap-table">
  <table class="this_table" id="table-javascript-3">3</table>
</div>

＆＃13;

Answer 2

$(document).on('click', '.report', function() {
 $('.bootstrap-table').hide(); 
var tableToShow=$(this).attr('data-id');
$('#'+tableToShow).closest('.bootstrap-table').show(); 
});

这里我隐藏了所有具有类bootstrap-table的元素，然后从这个我找到id并显示最近的bootstrap-table

隐藏除了单击和最近的父div之外的所有类

2 个答案: