JavaScript-将函数应用于具有相同类名的div集合中的特定div
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript-将函数应用于具有相同类名的div集合中的特定div,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2300字,纯文字阅读大概需要4分钟。
内容图文
![JavaScript-将函数应用于具有相同类名的div集合中的特定div](/upload/InfoBanner/zyjiaocheng/668/21a6048ba4e9454c80406e853cfa0411.jpg)
当我将鼠标悬停在.winner-container上时,JS函数告诉.headline从.winner-container中移出,然后告诉.bottom移入.winner-container.当我将鼠标悬停时,情况正好相反.
问题是,我将拥有数百个带有.winner-container类的容器.因此,我意识到,当我将鼠标悬停在一个容器上时,该功能将同时应用于数百个不同的容器.我只希望将函数应用于我悬停的特定容器.我可以通过为每个容器指定一个ID,然后为每个ID编写新的JS代码来做到这一点,但是考虑到会有300个这样的div,这将需要大量的工作.有没有更优雅的解决方案?
https://jsfiddle.net/6sm6ajht/
的HTML
<div class="winner-container">
<div class="top">
<h4 class="headline">SME Example 1</h4>
</div>
<div class="bottom">
<div class="winner-words">
<h6>SME Examle 1 is a technology company.</h6>
<h6><a>Learn more...</a></h6>
</div>
</div>
</div>
<div class="winner-container">
<div class="top">
<h4 class="headline">SME Example 2</h4>
</div>
<div class="bottom">
<div class="winner-words">
<h6>SME Examle 2 is an e-commerce company.</h6>
<h6><a>Learn more...</a></h6>
</div>
</div>
</div>
的CSS
.winner-container {
position: relative;
box-shadow: 0px 2.5px 1px 0px rgba(0, 0, 0, 0.25);
border: 1px solid #074E68;
}
.winner-container,
.top,
.bottom {
width: 10em;
height: 12em;
overflow: hidden;
}
.bottom {
position: absolute;
height: 12em;
width: 100%;
top: 12em;
transition: 0.5s ease-in-out;
}
.top .headline {
position: absolute;
top: 2.5em;
width: 100%;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 0.1);
transition: 0.5s ease-in-out;
}
.top-up .headline {
top: -2.5em;
}
.bottom-up.bottom {
top: 0em;
background-color: rgba(0, 0, 0, 0.65);
}
的JavaScript
$(".winner-container").on("mouseenter", function() {
$(".top").addClass('top-up');
$(".bottom").addClass('bottom-up');
});
$(".winner-container").on("mouseleave", function() {
$(".top").removeClass('top-up');
$(".bottom").removeClass('bottom-up');
});
解决方法:
对于$(this)选择器来说,这是一个绝佳的机会.因为有许多相同的元素,但是您只希望每个事件处理程序都引用该特定元素,所以可以使用$(this)并使用.children之类的相对选择器来定位相对于this元素的其他元素.
$(".winner-container").on("mouseenter", function() {
$(this).children(".top").addClass('top-up');
$(this).children(".bottom").addClass('bottom-up');
});
$(".winner-container").on("mouseleave", function() {
$(this).children(".top").removeClass('top-up');
$(this).children(".bottom").removeClass('bottom-up');
});
内容总结
以上是互联网集市为您收集整理的JavaScript-将函数应用于具有相同类名的div集合中的特定div全部内容,希望文章能够帮你解决JavaScript-将函数应用于具有相同类名的div集合中的特定div所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。