jQuery 使用 .each( ) 循环 .hover( ) 函数答案

【问题标题】：jQuery loop through .hover( ) function using .each( )jQuery 使用 .each( ) 循环 .hover( ) 函数
【发布时间】：2015-02-27 00:59:55
【问题描述】：

我有一个函数可以更改箭头的边框颜色以匹配按钮的悬停状态颜色。它作为 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>]

【问题讨论】：

它目前是做什么的？如果您提供按钮的 css 将会很有帮助。
嗨克林顿：我不确定你在哪里遇到问题。你能澄清一下出了什么问题吗？
它目前什么都不做。如果我不使用数组，该函数可以正常工作。目前箭头上的边框颜色没有改变
我找到了为什么我的方法不起作用我忘记在这个数组中的类前面添加句点 var btnName = ['btn-infra ','btn-dev ','btn-anal '];

标签： javascript jquery arrays each

【解决方案1】：

您希望在.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

【讨论】：