当我用 jQuery 单击另一个元素时隐藏元素
Hide element when I click on an other element with jQuery
所以我想有一个功能来切换我的图像下的一些文本。
这是切换脚本：
$(document).ready(function(){
$('.mariage').click(function(event){
event.stopPropagation();
$(".result_mariage").slideToggle("fast");
});
$(".result_mariage").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function () {
$(".result_mariage").hide();
});
脚本按预期工作，除非用户单击另一个 link 执行其他信息切换，切换堆栈而不是隐藏最后一个。如果我单击除另一个切换按钮以外的任何其他位置，信息将隐藏并且一切正常。
（这里是我点击触发 'bug' 的图片）
In blue are the other link who toggle stuff
JS Fiddle 例子：
https://jsfiddle.net/karg007/z6y54uro/
对不起，如果我的英语不是很好，它不是我的主要语言。
希望这些解释足够清楚，即使我对此表示怀疑，你也能帮助我：/
请不要犹豫，询问更多信息，以便我可以为您提供您需要的帮助。
简而言之，当我点击新的切换按钮时，我该如何隐藏之前的切换按钮？
已编辑答案
所以您 运行 进入 OP 的最大问题是您没有试图理解代码。许多新程序员（不幸的是，还有很多一直在编码的人）的一个大问题是，他们就是我所说的 Copy-Coders。复制 Whosebug 上的教程和答案可能会让您创建自己的网站，完成一些咨询工作，甚至支持您的整个职业生涯，但这与真正了解如何编程并不相同。
在 SO 上做教程和提问是非常好的（事实上，我就是这样学到了我所知道的 90% 的知识）但是你必须带着 学习[=66= 的意图去做] 从你发现的东西中，而不仅仅是完成你正在做的事情。我对您的建议是真正重新阅读我的原始答案（我在下面保留原样）并理解如何使用我展示的内容来完成您想要的。
话虽如此，我已经完成了开始的工作，所以让我们继续解决方案：
我已将您的 JSFIDDLE 复制到 Github 片段中，以便您和未来的用户可以在答案中看到结果。我立即注意到的第一件事是我的代码
原始答案中的内容已复制到您现有的 JS 中。虽然这很好并且您正确地将 "text" 更改为“_result”，但您错过了一些事情：
- 我的代码获取被点击元素的 ID，并使用它来查找应该取消隐藏的元素的 ID。虽然您正确地更改了查找代码以适应文本中的 ID，但您没有向被点击的图像添加任何 ID，因此我的代码无法执行任何操作。
- 您也没有删除最初用于实现此功能的 4 个函数，因此看起来我的代码似乎在做某事并且工作不正确，而实际上我的代码什么也没做，而您的代码是仍然在做它以前做的事情（虽然我肯定明白你之前说的是什么错误）。
- 关于我上面的复制编码器咆哮，请注意你和我如何以不同的方式处理问题以及你可以从中学到什么。
- 而您想通过查找 class 将侦听器函数附加到每个项目（这完全不相关，但您没有正确使用 classes 和 "mariage"，等等...更适合作为 id，您仍然可以像 classes 那样设置样式）我选择将一个侦听器附加到单个 class 的所有元素，然后通过 id 查找它们。
- 您的解决方案要求您为添加的每个项目编写新的 JS 代码，并且每次编写这些函数时都存在拼写错误或忘记更改某些内容的风险。
- 我的解决方案允许您向 HTML 添加任意数量的元素，而无需更改 JS。只要您的图片有一个 id 并且文本有一个等于 "image id" + "_result" 的 id，该功能就会自动发生。
我已尝试尽可能少地修改您的代码，只需要删除 4 个函数并向图像添加 ID（"mariage" 和 "amour"）即可获得您的 fiddle去工作。
我从你的 fiddle 中删除的四个函数：
// My toggle code for mariage_result ->text #1
$(document).ready(function() {
$('.mariage').click(function(event) {
event.stopPropagation();
$("#mariage_result").slideToggle("fast");
});
$("#mariage_result").on("click", function(event) {
event.stopPropagation();
});
});
$(document).on("click", function() {
$("#result_mariage").hide();
});
// My toggle code for amour_result ->text #2
$(document).ready(function() {
$('.amour').click(function(event) {
event.stopPropagation();
$("#amour_result").slideToggle("fast");
});
$("#amour_result").on("click", function(event) {
event.stopPropagation();
});
});
$(document).on("click", function() {
$("#amour_result").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
最终代码：
// Test code to untoggle the previous element toggled
let lastClicked = null;
$(".hover_selection").click(function() {
if (lastClicked) {
lastClicked.hide();
}
let me = $("#" + this.id + "_result");
me.show();
lastClicked = me;
});
// slick slider option
$(document).ready(function() {
$('.slider_index').slick({
infinite: true,
arrows: true,
centerMode: true,
slidesToShow: 1,
variableWidth: true
});
});
.tarif {
width: 750px;
text-align: left;
margin: auto;
margin-bottom: 30px;
margin-top: 50px;
}
.result {
display: none;
}
#mariage_result,
#amour_result,
#certificat_cadeau_result,
#maternite_result,
#portrait_result,
#commercial_result {
width: 780px;
height: auto;
margin: auto;
}
/* -----------CSS SLIDER BELOW THIS POINT-----*/
/* Arrows */
.slick-prev,
.slick-next {
font-size: 0;
line-height: 0;
position: absolute;
bottom: 10px;
display: block;
width: 150px;
height: 50px;
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}
.slick-prev:before,
.slick-next:before {
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: 25%;
z-index: 9999;
}
[dir='rtl'] .slick-prev {
right: 25px;
left: auto;
}
.slick-prev:before {
content: url('https://i.ibb.co/m9zR5YD/avant.png');
}
[dir='rtl'] .slick-prev:before {
content: url('https://i.ibb.co/xGrj9kQ/apres.png');
}
.slick-next {
right: 25%;
z-index: 9999;
}
[dir='rtl'] .slick-next {
right: auto;
left: -25px;
}
.slick-next:before {
content: url('https://i.ibb.co/xGrj9kQ/apres.png');
}
[dir='rtl'] .slick-next:before {
content: url('https://i.ibb.co/m9zR5YD/avant.png');
}
.slider_index {
width: 100%;
margin: auto;
}
.slider_index img {
width: 100px;
margin: auto;
padding: 0px 20px 0px 20px;
}
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after {
display: table;
content: '';
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
min-height: 1px;
}
[dir='rtl'] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -40px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
font-family: 'slick';
font-size: 30px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
opacity: .75;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="titre_de_page">
<p id="ancre">- Choisissez votre projet-photo -<br/>
</p>
</div>
<div class="slider_index">
<div>
<img class="hover_selection mariage" id="mariage" src="https://via.placeholder.com/300" />
<div class="caption_text">Mariage</div>
</div>
<div>
<img class="hover_selection amour" id="amour" src="https://via.placeholder.com/300" />
<div class="caption_text">Amour</div>
</div>
<div>
<img class="hover_selection maternite" src="https://via.placeholder.com/300" />
<div class="caption_text">Bedon + Bébé</div>
</div>
<div>
<img class="hover_selection portrait" src="https://via.placeholder.com/300" />
<div class="caption_text">Portrait</div>
</div>
<div>
<img class="hover_selection commercial" src="https://via.placeholder.com/300" />
<div class="caption_text">Commercial / Éditorial</div>
</div>
<div>
<img class="hover_selection certificat_cadeau" src="https://via.placeholder.com/300" />
<div class="caption_text">Certificat-cadeau</div>
</div>
</div>
<br/>
<div class="result" id="mariage_result">
<p class="all_texte tarif">
My text to toggle number 1
<br/><br/>
</p>
</div>
<div class="result" id="amour_result">
<p class="all_texte tarif">
Toggle text number 2
</p>
</div>
原答案
据我了解你的问题，你只需要一个变量来跟踪之前点击的项目。至于我在下面的演示中所做的，我认为它已经足够接近你想要做的了，因为我们没有样本可以使用。我想您可能与我的示例有很大不同的唯一部分是您查找 me 的方式，因为我不知道您的 DOM 的确切结构或您的确切命名方案是什么。
let lastClicked = null;
$(".clickable").click(function() {
if (lastClicked) {
lastClicked.hide();
}
let me = $("#" + this.id + "text");
me.show();
lastClicked = me;
});
#root {
width: 300px;
height: 300px;
background-color: black;
}
.text {
display: none;
}
#one {
width: 50px;
height: 50px;
background-color: red;
}
#two {
width: 50px;
height: 50px;
background-color: green;
}
#three {
width: 50px;
height: 50px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root">
<div class="clickable" id="one">
<p class="text" id="onetext"> 1 </p>
</div>
<div class="clickable" id="two">
<p class="text" id="twotext"> 2 </p>
</div>
<div class="clickable" id="three">
<p class="text" id="threetext"> 3 </p>
</div>
</div>
据我从你的问题中了解到，这可能会有所帮助。
$(document).ready(function(){
var checker = false;
$('.mariage').click(function(event){
event.stopPropagation();
if(!checker){
$(".result_mariage").hide("slow");
checker = true;
}
else{
$(".result_mariage").show("slow");
checker = false;
}
});
$(".result_mariage").on("click", function (event) {
event.stopPropagation();
});
$(document).on("click", function () {
if(!checker){
$(".result_mariage").hide("slow");
checker = true;
}
else{
$(".result_mariage").show("slow");
checker = false;
}
});
});
所以我想有一个功能来切换我的图像下的一些文本。 这是切换脚本：
$(document).ready(function(){
$('.mariage').click(function(event){
event.stopPropagation();
$(".result_mariage").slideToggle("fast");
});
$(".result_mariage").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function () {
$(".result_mariage").hide();
});
脚本按预期工作，除非用户单击另一个 link 执行其他信息切换，切换堆栈而不是隐藏最后一个。如果我单击除另一个切换按钮以外的任何其他位置，信息将隐藏并且一切正常。
（这里是我点击触发 'bug' 的图片） In blue are the other link who toggle stuff
JS Fiddle 例子：
https://jsfiddle.net/karg007/z6y54uro/
对不起，如果我的英语不是很好，它不是我的主要语言。
希望这些解释足够清楚，即使我对此表示怀疑，你也能帮助我：/ 请不要犹豫，询问更多信息，以便我可以为您提供您需要的帮助。
简而言之，当我点击新的切换按钮时，我该如何隐藏之前的切换按钮？
已编辑答案
所以您 运行 进入 OP 的最大问题是您没有试图理解代码。许多新程序员（不幸的是，还有很多一直在编码的人）的一个大问题是，他们就是我所说的 Copy-Coders。复制 Whosebug 上的教程和答案可能会让您创建自己的网站，完成一些咨询工作，甚至支持您的整个职业生涯，但这与真正了解如何编程并不相同。
在 SO 上做教程和提问是非常好的（事实上，我就是这样学到了我所知道的 90% 的知识）但是你必须带着 学习[=66= 的意图去做] 从你发现的东西中，而不仅仅是完成你正在做的事情。我对您的建议是真正重新阅读我的原始答案（我在下面保留原样）并理解如何使用我展示的内容来完成您想要的。 话虽如此，我已经完成了开始的工作，所以让我们继续解决方案：
我已将您的 JSFIDDLE 复制到 Github 片段中，以便您和未来的用户可以在答案中看到结果。我立即注意到的第一件事是我的代码 原始答案中的内容已复制到您现有的 JS 中。虽然这很好并且您正确地将 "text" 更改为“_result”，但您错过了一些事情：
- 我的代码获取被点击元素的 ID，并使用它来查找应该取消隐藏的元素的 ID。虽然您正确地更改了查找代码以适应文本中的 ID，但您没有向被点击的图像添加任何 ID，因此我的代码无法执行任何操作。
- 您也没有删除最初用于实现此功能的 4 个函数，因此看起来我的代码似乎在做某事并且工作不正确，而实际上我的代码什么也没做，而您的代码是仍然在做它以前做的事情（虽然我肯定明白你之前说的是什么错误）。
- 关于我上面的复制编码器咆哮，请注意你和我如何以不同的方式处理问题以及你可以从中学到什么。
- 而您想通过查找 class 将侦听器函数附加到每个项目（这完全不相关，但您没有正确使用 classes 和 "mariage"，等等...更适合作为 id，您仍然可以像 classes 那样设置样式）我选择将一个侦听器附加到单个 class 的所有元素，然后通过 id 查找它们。
- 您的解决方案要求您为添加的每个项目编写新的 JS 代码，并且每次编写这些函数时都存在拼写错误或忘记更改某些内容的风险。
- 我的解决方案允许您向 HTML 添加任意数量的元素，而无需更改 JS。只要您的图片有一个 id 并且文本有一个等于 "image id" + "_result" 的 id，该功能就会自动发生。
我已尝试尽可能少地修改您的代码，只需要删除 4 个函数并向图像添加 ID（"mariage" 和 "amour"）即可获得您的 fiddle去工作。
我从你的 fiddle 中删除的四个函数：
// My toggle code for mariage_result ->text #1
$(document).ready(function() {
$('.mariage').click(function(event) {
event.stopPropagation();
$("#mariage_result").slideToggle("fast");
});
$("#mariage_result").on("click", function(event) {
event.stopPropagation();
});
});
$(document).on("click", function() {
$("#result_mariage").hide();
});
// My toggle code for amour_result ->text #2
$(document).ready(function() {
$('.amour').click(function(event) {
event.stopPropagation();
$("#amour_result").slideToggle("fast");
});
$("#amour_result").on("click", function(event) {
event.stopPropagation();
});
});
$(document).on("click", function() {
$("#amour_result").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
最终代码：
// Test code to untoggle the previous element toggled
let lastClicked = null;
$(".hover_selection").click(function() {
if (lastClicked) {
lastClicked.hide();
}
let me = $("#" + this.id + "_result");
me.show();
lastClicked = me;
});
// slick slider option
$(document).ready(function() {
$('.slider_index').slick({
infinite: true,
arrows: true,
centerMode: true,
slidesToShow: 1,
variableWidth: true
});
});
.tarif {
width: 750px;
text-align: left;
margin: auto;
margin-bottom: 30px;
margin-top: 50px;
}
.result {
display: none;
}
#mariage_result,
#amour_result,
#certificat_cadeau_result,
#maternite_result,
#portrait_result,
#commercial_result {
width: 780px;
height: auto;
margin: auto;
}
/* -----------CSS SLIDER BELOW THIS POINT-----*/
/* Arrows */
.slick-prev,
.slick-next {
font-size: 0;
line-height: 0;
position: absolute;
bottom: 10px;
display: block;
width: 150px;
height: 50px;
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}
.slick-prev:before,
.slick-next:before {
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: 25%;
z-index: 9999;
}
[dir='rtl'] .slick-prev {
right: 25px;
left: auto;
}
.slick-prev:before {
content: url('https://i.ibb.co/m9zR5YD/avant.png');
}
[dir='rtl'] .slick-prev:before {
content: url('https://i.ibb.co/xGrj9kQ/apres.png');
}
.slick-next {
right: 25%;
z-index: 9999;
}
[dir='rtl'] .slick-next {
right: auto;
left: -25px;
}
.slick-next:before {
content: url('https://i.ibb.co/xGrj9kQ/apres.png');
}
[dir='rtl'] .slick-next:before {
content: url('https://i.ibb.co/m9zR5YD/avant.png');
}
.slider_index {
width: 100%;
margin: auto;
}
.slider_index img {
width: 100px;
margin: auto;
padding: 0px 20px 0px 20px;
}
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after {
display: table;
content: '';
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
min-height: 1px;
}
[dir='rtl'] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -40px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
font-family: 'slick';
font-size: 30px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
opacity: .75;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="titre_de_page">
<p id="ancre">- Choisissez votre projet-photo -<br/>
</p>
</div>
<div class="slider_index">
<div>
<img class="hover_selection mariage" id="mariage" src="https://via.placeholder.com/300" />
<div class="caption_text">Mariage</div>
</div>
<div>
<img class="hover_selection amour" id="amour" src="https://via.placeholder.com/300" />
<div class="caption_text">Amour</div>
</div>
<div>
<img class="hover_selection maternite" src="https://via.placeholder.com/300" />
<div class="caption_text">Bedon + Bébé</div>
</div>
<div>
<img class="hover_selection portrait" src="https://via.placeholder.com/300" />
<div class="caption_text">Portrait</div>
</div>
<div>
<img class="hover_selection commercial" src="https://via.placeholder.com/300" />
<div class="caption_text">Commercial / Éditorial</div>
</div>
<div>
<img class="hover_selection certificat_cadeau" src="https://via.placeholder.com/300" />
<div class="caption_text">Certificat-cadeau</div>
</div>
</div>
<br/>
<div class="result" id="mariage_result">
<p class="all_texte tarif">
My text to toggle number 1
<br/><br/>
</p>
</div>
<div class="result" id="amour_result">
<p class="all_texte tarif">
Toggle text number 2
</p>
</div>
原答案
据我了解你的问题，你只需要一个变量来跟踪之前点击的项目。至于我在下面的演示中所做的，我认为它已经足够接近你想要做的了，因为我们没有样本可以使用。我想您可能与我的示例有很大不同的唯一部分是您查找 me 的方式，因为我不知道您的 DOM 的确切结构或您的确切命名方案是什么。
let lastClicked = null;
$(".clickable").click(function() {
if (lastClicked) {
lastClicked.hide();
}
let me = $("#" + this.id + "text");
me.show();
lastClicked = me;
});
#root {
width: 300px;
height: 300px;
background-color: black;
}
.text {
display: none;
}
#one {
width: 50px;
height: 50px;
background-color: red;
}
#two {
width: 50px;
height: 50px;
background-color: green;
}
#three {
width: 50px;
height: 50px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root">
<div class="clickable" id="one">
<p class="text" id="onetext"> 1 </p>
</div>
<div class="clickable" id="two">
<p class="text" id="twotext"> 2 </p>
</div>
<div class="clickable" id="three">
<p class="text" id="threetext"> 3 </p>
</div>
</div>
据我从你的问题中了解到，这可能会有所帮助。
$(document).ready(function(){
var checker = false;
$('.mariage').click(function(event){
event.stopPropagation();
if(!checker){
$(".result_mariage").hide("slow");
checker = true;
}
else{
$(".result_mariage").show("slow");
checker = false;
}
});
$(".result_mariage").on("click", function (event) {
event.stopPropagation();
});
$(document).on("click", function () {
if(!checker){
$(".result_mariage").hide("slow");
checker = true;
}
else{
$(".result_mariage").show("slow");
checker = false;
}
});
});