相同的类，但仅为所选的一个触发函数

Question

大家好，我很难理解如何使这个工作。

我有8个不同的div，每个都有一个img用作按钮和相同的类(tm-img)和隐藏的div与额外的信息。我想要的是在开始时只显示img，当用户单击8个图像中的一个时，这取决于他们单击的那个图像显示的隐藏div。(现在发生的事情是，如果我点击一个图像，所有隐藏的div从所有图像显示不只是我点击的那一个)

<div class="tm-full-container">
<div class="team-member card-container blue-card">
<img class='tm-img' onclick='run()' src="/team_1.png" alt="">
<h5 class="tm-title">Chef</h6>

<div class="tm-info">
<p class="tm-name">Rick Jones</p>
<p class="tm-position">Chef</p>
</div>
</div>
<div class="tm-full-info">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at 
ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia 
tempora temporibus perspiciatis? Assumenda?</p>
</div>
</div>
<script>
function run(){

$('.tm-info').toggle();
$('.tm-full-info').toggle();
$('.tm-title').toggle();

}</script>

其他7个div看起来都一样，只是图片和名字不同(Rick)。

提前感谢。

例子

Answer 1

考虑以下内容:

$(function() {
function revealFullInfo(event) {
var self = $(event.target);
var parent = self.closest(".tm-full-container");
$('.tm-info, .tm-full-info, .tm-title', parent).toggle();
}
$(".tm-img").click(revealFullInfo);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tm-full-container">
<div class="team-member card-container blue-card">
<img class='tm-img' src="https://dummyimage.com/100x150/000/fff.png" alt="">
<h5 class="tm-title">Chef</h6>
<div class="tm-info">
<p class="tm-name">Rick Jones</p>
<p class="tm-position">Chef</p>
</div>
</div>
<div class="tm-full-info">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</p>
</div>
</div>

关键是要使用正确的选择器和作用域。

$('.tm-info, .tm-full-info, .tm-title', parent).toggle();

这与

相同

parent.find('.tm-info, .tm-full-info, .tm-title').toggle();

Answer 2

可以使用关键字This: https://www.yogihosting.com/jquery-this/

.tm-info, .tm-full-info, .tm-title {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tm-full-container">
<div class="team-member card-container blue-card">
<img class='tm-img' src="https://via.placeholder.com/150" alt="">
<h5 class="tm-title">Chef</h6>
<div class="tm-info">
<p class="tm-name">Rick Jones</p>
<p class="tm-position">Chef</p>
</div>
</div>
<div class="tm-full-info">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at 
ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia 
tempora temporibus perspiciatis? Assumenda?</p>
</div>
</div>

<div class="tm-full-container">
<div class="team-member card-container blue-card">
<img class='tm-img' src="https://via.placeholder.com/150" alt="">
<h5 class="tm-title">Chef</h6>
<div class="tm-info">
<p class="tm-name">Rick Jones</p>
<p class="tm-position">Chef</p>
</div>
</div>
<div class="tm-full-info">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at 
ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia 
tempora temporibus perspiciatis? Assumenda?</p>
</div>
</div>
<script>
$('.tm-img').click(function(){
$(this).parent().parent().find('.tm-info').toggle();
$(this).parent().parent().closest('.tm-full-info').toggle();
$(this).parent().parent().closest('.tm-title').toggle();
});
</script>

Answer 3

您可以像下面的代码片段那样做。使用this关键字，以便触发被单击的元素，而不是所有元素。

你也可以通过for循环运行所有的标签和触发(切换)点击事件

function funcRun(show) {
var showInfo = show.querySelector(".tm-tag-Info");
showInfo.classList.toggle("tm-tag-Info-Show")
}

.tm-tag-Info {
display: none
}
.tm-tag-Info-Show {
display: block
}
.tm-tag {
border: 2px solid red;
margin: 10px;
padding: 10px;
}
.imageFun {
width: 100px;
height: 100px
}

<div class="tm-tag" onclick="funcRun(this)">
<h4 class="tm-tag-Hed">CV for BV</h4>
<span class="tm-tag-Info"><img alt="imageFun" src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="imageFun"><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</span>
</div>
<div class="tm-tag" onclick="funcRun(this)">
<h4 class="tm-tag-Hed">CV for BV</h4>
<span class="tm-tag-Info"><img alt="imageFun" src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="imageFun"><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</span>
</div>
<div class="tm-tag" onclick="funcRun(this)">
<h4 class="tm-tag-Hed">CV for BV</h4>
<span class="tm-tag-Info"><img alt="imageFun" src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="imageFun"><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</span>
</div>