JQuery - 根据类名和数据attr切换选定的行。 （数据标签的ID），

Question

虽然我一直在阅读/搜索很多问题。表格行和切换，我还没有找到为什么我的Jquery不工作。这是我的情况：

我想要实现的目标

使用className'show-tag'显示行中的任何td，显示带有className'edit-tag'的tr，其中data-tagid与点击的td的data-tagid相同（显示使用display：table- row（not block））并使用className'edit-tag'和不同的data-tagid隐藏所有行。

表格

<tr data-tagid='1', class='show-tag'>
    <td data-tagid='1', class='show-tag'>data 1</td>
    <td data-tagid='1', class='show-tag'>data 2</td>
    <td data-tagid='1', class='show-tag'>data 3</td>
    <td class="delete-ban">data 4</td>
</tr>
<tr data-tagid='1', class='edit-tag'>
    <td>onclick of any td in row with show-tag class AND same data-tag (1) show this tr (using display: table-row) and hide rows with className edit-tag and different data-tagid</td>
</tr>
<tr data-tagid='2', class='show-tag'>
    <td data-tagid='2', class='show-tag'>data 1</td>
    <td data-tagid='2', class='show-tag'>data 2</td>
    <td data-tagid='2', class='show-tag'>data 3</td>
    <td class="delete-ban">data 4</td>
</tr>
<tr data-tagid='2', class='edit-tag'>
    <td>onclick of any td in row with show-tag class AND same data-tag (1) show this tr (using display: table-row) and hide rows with className edit-tag and different data-tagid</td>
</tr>

JQuery的

$("td.show-tag").on("click", function(event) { 
    if ($(this).is("td")) { 
    var tagId = $(this).closest("td").data("tagid"); 
    var editRow = $("tr.edit-tag.[data-tagid=" + tagId +"]"); 
    $editRow.toggle(); 
} 
});

CSS

.edit-tag {
    display: none;

Answer 1

除了点击之外，您需要.hide()所有tr.edit-tag。对于该用途.not()

$("td.show-tag").on("click", function(event) { 
  var tagId = $(this).data('tagid');
  $('tr.edit-tag').not($('tr.edit-tag[data-tagid='+tagId+']')).hide();
  $('tr.edit-tag[data-tagid='+tagId+']').toggle();
});

$("td.show-tag").on("click", function(event) { 
  var tagId = $(this).data('tagid');
  //console.log(tagId);
  $('tr.edit-tag').not($('tr.edit-tag[data-tagid='+tagId+']')).hide();
  $('tr.edit-tag[data-tagid='+tagId+']').toggle();
});

.edit-tag {
    display: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr data-tagid='1', class='show-tag'>
    <td data-tagid='1', class='show-tag'>data 1</td>
    <td data-tagid='1', class='show-tag'>data 2</td>
    <td data-tagid='1', class='show-tag'>data 3</td>
    <td class="delete-ban">data 4</td>
</tr>
<tr data-tagid='1', class='edit-tag'>
    <td>1onclick of any td in row with show-tag class AND same data-tag (1) show this tr (using display: table-row) and hide rows with className edit-tag and different data-tagid</td>
</tr>
<tr data-tagid='2', class='show-tag'>
    <td data-tagid='2', class='show-tag'>data 1</td>
    <td data-tagid='2', class='show-tag'>data 2</td>
    <td data-tagid='2', class='show-tag'>data 3</td>
    <td class="delete-ban">data 4</td>
</tr>
<tr data-tagid='2', class='edit-tag'>
    <td>2onclick of any td in row with show-tag class AND same data-tag (1) show this tr (using display: table-row) and hide rows with className edit-tag and different data-tagid</td>
</tr>
  </table>