如何解决动态jquery如何仅将 jquery 应用于某些元素?
嘿伙计们,我正在做一个简单的悬停颜色更改,但是我发现自己在重复 jquery 是否可以这样做,以便当 btn 悬停时相应的 service-icon 更改颜色?不重复如下。
$(document).ready(function() {
$('.btn-1').hover(function() {
$('.service-icon-1').css('color','#05FAB8');
},function(){
$('.service-icon-1').css('color','');
});
});
$(document).ready(function() {
$('.btn-2').hover(function() {
$('.service-icon-2').css('color',function(){
$('.service-icon-2').css('color','');
});
});
$(document).ready(function() {
$('.btn-3').hover(function() {
$('.service-icon-3').css('color',function(){
$('.service-icon-3').css('color','');
});
});
解决方法
如果没有您的 HTML,我的代码段可能无关紧要。我假设图标不是每个按钮的子项,因为那太容易了。
使用 JS,我会使用 data-attribute 在按钮和图标上存储服务编号......并在 attribute selector 中使用该数据属性值。
注意 template litteral 的用法:反引号 `
和 ${}
。
$(document).ready(function() {
$('.btn').hover(function() {
let serviceNb = $(this).data("service")
$(`.service-icon[data-service=${serviceNb}]`).css('color','#05FAB8');
},function(){
let serviceNb = $(this).data("service")
$(`.service-icon[data-service=${serviceNb}]`).css('color','');
});
});
div{
margin: 1em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<span class="service-icon" data-service="1"><i class="fa fa-tools"></i></span>
<span class="service-icon" data-service="2"><i class="fa fa-hand-holding-usd"></i></span>
<span class="service-icon" data-service="3"><i class="fa fa-trash"></i></span>
</div>
<button class="btn" data-service="1">Repair</button>
<button class="btn" data-service="2">Sell</button>
<button class="btn" data-service="3">Trash</button>
1) Put "btn-1","btn-2,"btn-3" in the ID of your buttons,instead of class.
2) Put a common class in the buttons. (e.g. "btn")
3) Use $(".btn").hover ONCE
4) Inside you can use $(this).prop("id") to get the actual ID (e.g. "btn-1")
5) Extract the "1" from that ID that you retrieve. Put it in var btnIdNo.
6) Use $(`.service-icon-{btnIdNo}`).css(blah)
总是尝试将唯一标识符放在 ID 而不是 CLASS 中。保留 CLASS 以获取识别元素“类型”的方法。
,可能是这样的:
$(document).ready(function() {
$('.btn-1,.btn-2,.btn-3').hover(function() {
if ($(this).is('.btn-1')) {
$('.service-icon-1').css('color','#05FAB8');
} else if ($(this).is('.btn-2')) {
$('.service-icon-2').css('color','#05FAB8');
} else {
$('.service-icon-3').css('color','#05FAB8');
}
},function(){
$('.service-icon-1,.service-icon-2,.service-icon-3').css('color','');
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。