我在悬停状态下使用.switchClass.container将.child1从 100% 宽度切换到 40% 宽度，但我在多个div 上有 .container。我只希望.switchClass函数发生在我悬停在的一个 .container 上，而不是全部，但我不想使用 ID，因为我宁愿我必须创建的每一行都没有一百万个脚本(我需要大约 30 个(
所以我有一系列行，它们有一个容器，然后是两个并排的div，称为child1和child2.在默认(非悬停(状态下，我希望child1跨越容器的整个宽度。然后，当您将鼠标悬停在容器上时，我希望child1和child2滑动，以便child1宽度为 40%，child2宽度为自动宽度。我目前正在使用switchClass来实现这一点。
我有这个工作，但现在我的问题是，当我将鼠标悬停在一个容器上时，动画发生在所有带有"容器"类的div 上。
请注意，到目前为止，我已经从谷歌搜索和StackOverflow中自学了jQuery，所以我的理解非常有限，到目前为止我使用的函数很少。很抱歉，如果这是一个非常容易解决的问题。
到目前为止，我已经找到了使用$(this)作为选择器的解决方案，但由于我希望将child1类悬停在容器上时切换，所以我还没有真正弄清楚如何在该上下文中正确使用$(this)，因为然后它会尝试在 .container 上切换类
我没有切换到使用 ID 的唯一原因是因为我需要此页面上大约 30 行。我只是希望当您将鼠标悬停在图像上时能够显示该图像所指的内容的一点摘要。
JSFIDDLE： https://jsfiddle.net/sling/d6x4sfLn/
$(function() {
$(".container").on('click', function() {
$(".image-card").switchClass("image-card", "image-card-hover", 1000);
$(".image-card-hover").switchClass("image-card-hover", "image-card", 1000);
});
});.container {
width: 100%;
height: 50vh;
display: block;
overflow: hidden;
.image-h2 {
color: white;
padding: 1px;
margin: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.image-card {
background-image: url("http://www.steves-digicams.com/blog/wp-content/uploads/2017/10/Nikon_D850_Sample_13.jpg");
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
position: relative;
display: inline-block;
}
.image-card-hover {
background-image: url("http://www.steves-digicams.com/blog/wp-content/uploads/2017/10/Nikon_D850_Sample_13.jpg");
background-image: url("http://www.steves-digicams.com/blog/wp-content/uploads/2017/10/Nikon_D850_Sample_13.jpg");
background-size: cover;
background-position: center;
width: 40%;
height: 100%;
position: relative;
display: inline-block;
}
.text-card {
display: inline-block;
width: 40%;
padding-left: 1em;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container" id="first">
<div class="image-card">
<h2 class="image-h2">
This is the first project
</h2>
</div>
<div class="text-card">
<h2>
Title
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin posuere urna non magna imperdiet, non commodo magna finibus. Integer vel lacus sit amet augue imperdiet malesuada. Praesent hendrerit gravida ligula, ac tempor sapien pharetra eget. Maecenas
hendrerit, odio quis eleifend vehicula, lacus dui pretium urna, quis facilisis tortor augue eget ipsum. Sed viverra massa vitae pretium tristique. Quisque nec felis mi.
</p>
</div>
</div>
<div class="container" id="second">
<div class="image-card">
<h2 class="image-h2">
This is the first project
</h2>
</div>
<div class="text-card">
<h2>
Title
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin posuere urna non magna imperdiet, non commodo magna finibus. Integer vel lacus sit amet augue imperdiet malesuada. Praesent hendrerit gravida ligula, ac tempor sapien pharetra eget. Maecenas
hendrerit, odio quis eleifend vehicula, lacus dui pretium urna, quis facilisis tortor augue eget ipsum. Sed viverra massa vitae pretium tristique. Quisque nec felis mi.
</p>
</div>
</div>不仅仅是我徘徊在效果上的那个.container，所有.containers都有效果。
使用$(this)仅选择同一包含中的元素：
$(function() {
$(".container").on('click', function() {
$(this).find(".image-card").switchClass("image-card", "image-card-hover", 1000);
$(this).find(".image-card-hover").switchClass("image-card-hover", "image-card", 1000);
});
});
斯菲德尔