jQuery 使用 .each( ) 遍历 .hover( ) 函数
jQuery loop through .hover( ) function using .each( )
我有一个函数可以更改箭头的边框颜色以匹配按钮的悬停状态颜色。它作为 3 个独立的函数工作,但我想使用 .each( ) 将它们组合起来请告诉我哪里出错了
变量
var btnArrowPath = '.btn + .btn-arrow';
var btnName = ['btn-infra ','btn-dev ','btn-anal '];
var btnColor = ['#286090','#449d44','#31b0d5'];
var btnRollColor = ['#337ab7','#5cb85c','#5bc0de'];
函数
$('.btn-wrap').each(function(i, value){
$(btnName[value] + '.btn').hover(function(i, value){
$(btnName[value] + btnArrowPath).css('border-top-color',btnColor[value]);
}, function(){
$(btnName[value] + btnArrowPath).css('border-top-color',btnRollColor[value]);
});
});
HTML
<div class="hero-wrap">
<div class="hero-popup">
<div class="row">
<div class="btn-wrap btn-infra">
<button data-trigger="focus" type="button" class="btn btn-primary" data-toggle="popover" title="Infrastructure" data-content="And here's some amazing content. It's very engaging. Right? <a href='#'>Do it!</a>" data-placement="bottom">Infrastructure</button>
<div class="btn-arrow pull-right"></div>
</div>
</div>
<div class="row">
<div class="btn-wrap btn-dev">
<button data-trigger="focus" type="button" class="btn btn-info" data-toggle="popover" title="Development" data-content="And here's some amazing content. It's very engaging. Right? <a href='#'>Do it!</a>" data-placement="top">Development</button>
<div class="btn-arrow pull-right"></div>
</div>
</div>
<div class="row">
<div class="btn-wrap btn-anal">
<button data-trigger="focus" type="button" class="btn btn-success" data-toggle="popover" title="Analysis" data-content="And here's some amazing content. It's very engaging. Right? <a href='#'>Do it!</a>" data-placement="top">Analysis</button>
<div class="btn-arrow pull-right"></div>
</div>
</div>
</div>]
您想在 .btn-wrap
元素内为 .btn
元素设置悬停功能,这将更改悬停元素的下一个兄弟元素的边框顶部颜色,对吗?
所以
$('.btn-wrap .btn').each(function (i, value) {
$(this).hover(function (e) {
$(this).next('.btn-arrow').css('border-top-color', btnColor[i]);
}, function () {
$(this).next('.btn-arrow').css('border-top-color', btnRollColor[i]);
});
});
演示:Fiddle
你可以像
一样不用循环
var $btns = $('.btn-wrap .btn').hover(function (e) {
$(this).next('.btn-arrow').css('border-top-color', btnColor[$btns.index(this)]);
}, function () {
$(this).next('.btn-arrow').css('border-top-color', btnRollColor[$btns.index(this)]);
});
演示:Fiddle
我有一个函数可以更改箭头的边框颜色以匹配按钮的悬停状态颜色。它作为 3 个独立的函数工作,但我想使用 .each( ) 将它们组合起来请告诉我哪里出错了
变量
var btnArrowPath = '.btn + .btn-arrow';
var btnName = ['btn-infra ','btn-dev ','btn-anal '];
var btnColor = ['#286090','#449d44','#31b0d5'];
var btnRollColor = ['#337ab7','#5cb85c','#5bc0de'];
函数
$('.btn-wrap').each(function(i, value){
$(btnName[value] + '.btn').hover(function(i, value){
$(btnName[value] + btnArrowPath).css('border-top-color',btnColor[value]);
}, function(){
$(btnName[value] + btnArrowPath).css('border-top-color',btnRollColor[value]);
});
});
HTML
<div class="hero-wrap">
<div class="hero-popup">
<div class="row">
<div class="btn-wrap btn-infra">
<button data-trigger="focus" type="button" class="btn btn-primary" data-toggle="popover" title="Infrastructure" data-content="And here's some amazing content. It's very engaging. Right? <a href='#'>Do it!</a>" data-placement="bottom">Infrastructure</button>
<div class="btn-arrow pull-right"></div>
</div>
</div>
<div class="row">
<div class="btn-wrap btn-dev">
<button data-trigger="focus" type="button" class="btn btn-info" data-toggle="popover" title="Development" data-content="And here's some amazing content. It's very engaging. Right? <a href='#'>Do it!</a>" data-placement="top">Development</button>
<div class="btn-arrow pull-right"></div>
</div>
</div>
<div class="row">
<div class="btn-wrap btn-anal">
<button data-trigger="focus" type="button" class="btn btn-success" data-toggle="popover" title="Analysis" data-content="And here's some amazing content. It's very engaging. Right? <a href='#'>Do it!</a>" data-placement="top">Analysis</button>
<div class="btn-arrow pull-right"></div>
</div>
</div>
</div>]
您想在 .btn-wrap
元素内为 .btn
元素设置悬停功能,这将更改悬停元素的下一个兄弟元素的边框顶部颜色,对吗?
所以
$('.btn-wrap .btn').each(function (i, value) {
$(this).hover(function (e) {
$(this).next('.btn-arrow').css('border-top-color', btnColor[i]);
}, function () {
$(this).next('.btn-arrow').css('border-top-color', btnRollColor[i]);
});
});
演示:Fiddle
你可以像
一样不用循环var $btns = $('.btn-wrap .btn').hover(function (e) {
$(this).next('.btn-arrow').css('border-top-color', btnColor[$btns.index(this)]);
}, function () {
$(this).next('.btn-arrow').css('border-top-color', btnRollColor[$btns.index(this)]);
});
演示:Fiddle