Question

当我点击toggleClass()时，我的.personId方法会激活，但当我再次点击它或其他.personId时，它不会停用。我在这里要做的是拥有人的名字，点击它时会显示他们的姓氏DOB等，然后再次点击它就会消失。现在当我点击名称时会显示信息，但是再次点击时或者点击其他personId时它不会消失。

$(document).ready(function() {
    $(".personId").on("click", function () {
        var x = $(this).text();
        $("." + x).toggleClass($(this).text());
    });
});

<table class="personIdTable">
    <tr><td class="personId">Bob</td></tr>
    <tr><td class="personId">Bill</td></tr>
    <tr><td class="personId">Tom</td></tr>
    <tr><td class="personId">Jimmy</td></tr>
</table>
<h1 class="Bob"> BOB SMITH 04/12/1962 </h1>
<h1 class="Bill"> BILL SMITH 04/12/1962 </h1>
<h1 class="Tom"> TOM SMITH 04/12/1962 </h1>
<h1 class="Jimmy"> JIMMY SMITH 04/12/1962 </h1>

.Bob {
    display: none;
}

.Bill {
    display: none;
}

.Tom {
    display: none;
}

.Jimmy {
    display: none;
}

Answer 1

我建议这样做略有不同：

Codepen

HTML（并从html中的类名中删除句点）

<table class="personIdTable">
    <tr><td class="personId">Bob</td></tr>
    <tr><td class="personId">Bill</td></tr>
    <tr><td class="personId">Tom</td></tr>
    <tr><td class="personId">Jimmy</td></tr>
</table>
<h1 class="Bob"> BOB SMITH 04/12/1962 </h1>
<h1 class="Bill"> BILL SMITH 04/12/1962 </h1>
<h1 class="Tom"> TOM SMITH 04/12/1962 </h1>
<h1 class="Jimmy"> JIMMY SMITH 04/12/1962 </h1>

CSS：

注意：如果您要查找有效的html，则可能不应使用h1标记，因为每个部分应该只有一个h1。

h1 {
  display: none;
}
.is-displayed {
  display: block;
}

Jquery的

$(".personId").on("click", function() {
  var x = "." + $(this).text();
  $('h1').not(x).removeClass('is-displayed');
  $(x).toggleClass('is-displayed');
});

Answer 2

问题：你执行此操作$("." + x).toggleClass($(this).text());会导致您正在切换的课程被删除，因此无法再进行切换，例如：如果您切换＆＃39; .Bill＆＃39;，＆＃ 39，比尔＆＃39; class已从元素中删除。下次没有找到Bill类来添加账单类（paradox？）。

所以不要这样做：

.Bob {
    display: none;
}

.Bill {
    display: none;
}

.Tom {
    display: none;
}

.Jimmy {
    display: none;
}

你保留一个班级：

.hide {
  display: none;
}

更新您的HTML：

<table class="personIdTable">
    <tr><td class="personId">Bob</td></tr>
    <tr><td class="personId">Bill</td></tr>
    <tr><td class="personId">Tom</td></tr>
    <tr><td class="personId">Jimmy</td></tr>
</table>
<h1 class="Bob hide"> BOB SMITH 04/12/1962 </h1>
<h1 class="Bill hide"> BILL SMITH 04/12/1962 </h1>
<h1 class="Tom hide"> TOM SMITH 04/12/1962 </h1>
<h1 class="Jimmy hide"> JIMMY SMITH 04/12/1962 </h1>

请注意，我删除了＆＃39;。＆＃39;来自班级名称中的.Bob，因为你在html中不需要它。

更新您的js：

$(document).ready(function() {
    $(".personId").on("click", function () {
        var x = $(this).text();
        $("." + x).toggleClass('hide');
    });
});

Answer 3

您可以使用以下代码段：

$(document).ready(function() {
		var selectedPerson = null;  // Stores the last selected person.
        $(".personId").on("click", function () {
        var x = $(this).text();  // Get the name.
        // If no previous selected, do not change classes and ids.
        if(selectedPerson != null){
        // Otherwise do.
          $("#selectedPerson").toggleClass(selectedPerson).removeAttr("id");
        }
        // If same selected twice, just hide.
	 	if(selectedPerson == x){
			selectedPerson = null;
			return;
		}
        // Otherwise show the proper header and store the selection.
        $("." + x).toggleClass(x).attr("id","selectedPerson");
		selectedPerson = x;
    });	
});

.Bob {
    display: none;
}

.Bill {
    display: none;
}

.Tom {
    display: none;
}

.Jimmy {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="personIdTable">
    <tr><td class="personId">Bob</td></tr>
    <tr><td class="personId">Bill</td></tr>
    <tr><td class="personId">Tom</td></tr>
    <tr><td class="personId">Jimmy</td></tr>
</table>
<h1 class="Bob"> BOB SMITH 04/12/1962 </h1>
<h1 class="Bill"> BILL SMITH 04/12/1962 </h1>
<h1 class="Tom"> TOM SMITH 04/12/1962 </h1>
<h1 class="Jimmy"> JIMMY SMITH 04/12/1962 </h1>

它的作用是存储最后选择的人，给它一个正确的id并使其成为当你点击一个新人时，前一个人将失去他们的id并回到他们的班级，新的人将获得适当的身份并失去了班级。

编辑：通过在jQuery函数中添加一个条件，我这样做，当你点击两次相同的名字时，它会隐藏所有名字。

Answer 4

而不是使用

$("." + x).toggleClass($(this).text());

使用

$(this).toggleClass($(this).text());

toggleClass激活但不是停用

4 个答案: