在单击另一个元素时使用.this to ToggleClass
在单击另一个元素时使用.this to ToggleClass
提问于 2019-03-16 07:05:09
我正在尝试做这个翻转的事情，效果很好，但由于某些原因，一行动画(.info不会添加info-up类)不会触发。它要么适用于屏幕上类的每一次迭代，要么在我使用它时，它不能单独工作。
$(".full-bio").hide();
$(".inner-2").each(function(){
$(this).hover(function(){
$(".info",this).toggleClass("info-up");
$(this).toggleClass("move-up");
$(".full-bio", this).fadeToggle(1000);
});
});body {
background-color: #999;
}
#jar {
width:300px;
height:500px;
position: relative;
overflow: hidden;
}
.blue {
width: 100%;
height: 100%;
background-image: url("https://cdn2.hubspot.net/hubfs/2984366/V3_kiip_December2017/Images/icon-flame.svg?t=1532539767047");
background-position: 100% center;
background-repeat: no-repeat;
background-attachment: fixed;
position: absolute;
}
.info {
width: 100%;
height: 30%;
background-color: white;
border-top: 8px solid transparent;
-moz-border-image: -moz-linear-gradient( 0deg, rgb(5,210,220) 0%, rgb(0,92,198) 100%);
-webkit-border-image: -webkit-linear-gradient( 0deg, rgb(5,210,220) 0%, rgb(0,92,198) 100%);
border-image: linear-gradient(to right, #05d2dc 0%, #005cc6 100%);
border-image-slice: 1;
position: absolute;
bottom: 0;
transform: skewY(-6deg);
transform-origin: top left;
transition: all 1s;
}
.info-up {
height: 99%;
transform: none;
transform-origin: top left;
}
.inner {
width: 100%;
height:30%;
background-color: white;
position: absolute;
bottom: 0;
}
.inner-2 {
width: auto;
height:100%;
background-color: transparent;
position: absolute;
bottom: -77%;
transition: all 1s;
padding: 1em;
}
.move-up {
transform: translateY(-70%);
}
.full-bio {
padding:1em;
}<html>
<head>
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<div id="jar">
<div class="blue">IMG</div>
<div class="info"> </div>
<div class="inner"> </div>
<div class="inner-2">
<h2>Header</h2>
<h3>Sub Title</h3>
<p class="full-bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus, dui ut auctor ultricies, mauris tellus hendrerit urna, sit amet eleifend tellus lectus et lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce a diam ut tortor rhoncus semper. Cras ultrices sollicitudin ornare. Integer et dui sed lacus convallis suscipit.</p>
</div>
</div>
<div id="jar">
<div class="blue">IMG</div>
<div class="info"> </div>
<div class="inner"> </div>
<div class="inner-2">
<h2>Header</h2>
<h3>Sub Title</h3>
<p class="full-bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus, dui ut auctor ultricies, mauris tellus hendrerit urna, sit amet eleifend tellus lectus et lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce a diam ut tortor rhoncus semper. Cras ultrices sollicitudin ornare. Integer et dui sed lacus convallis suscipit.</p>
</div>
</div>
</body>
</html>
我做错了什么？
回答 2
Stack Overflow用户
发布于 2019-03-16 07:24:41
您可以使用.siblings()来选择同级元素。这里的.info类是.ner-2的同级类。
只需将您的代码更改为以下代码。
$(".inner-2").each(function(){
$(this).hover(function(){
$(this).siblings(".info").toggleClass("info-up");
$(this).toggleClass("move-up");
$(".full-bio", this).fadeToggle(1000);
});
});这里是小提琴- https://jsfiddle.net/39ksah65/
Stack Overflow用户
发布于 2019-03-16 12:29:22
@Jason的答案应该是有效的，但我只想指出，你实际上并不需要.each循环，如果你省略它，你的代码会工作得更好：
$('.inner-2').hover(function(){ //this sets an event listener for the "hover" event for all
//elements with a class="inner-2"
$(this).siblings(".info").toggleClass("info-up");
$(this).toggleClass("move-up");
$(".full-bio", this).fadeToggle(1000);
});只有在不使用事件侦听器的情况下更改元素时(鼠标单击、悬停等)，或者当事件侦听器在不同的元素上触发时需要触发循环时，才需要使用.each。
例如，假设您想要在用户按下带有id="bar"的按钮时使用class="foo"隐藏所有元素
$('#bar').on('click', function() { // when button is pressed
$('.foo').each(function() {
$(this).hide(); //hide all elements with class="foo"
});希望这能有所帮助！})；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55191731
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号