javascript - 使用 jquery 将一个 div 的子级绑定(bind)到另一个 div 的子级

Question

我有两个父 div:.inputs 和 .infoBoxes。他们每个人都有相同数量的 child 。当用户点击 .inputs 中的第一个 .input 时，.infoBoxes 中的第一个 .infoBox 应该 slideDown()。第二个、第三个等也是如此。我想在不为每一对重新编写相同代码的情况下执行此操作。到目前为止我已经:

var $inputs = $('.inputs').children();
var $infoBoxes = $('.infoBoxes').children(); 

for(var i = 0; i < $inputs.length; i++ ) {
    $($inputs[i]).find('.input').focus(function() {
        $($infoBoxes[i]).slideDown();
    })
    $($inputs[i]).find('.input').blur(function() {
        $($infoBoxes[i]).slideUp();
    })
}

这不起作用，但我尝试用每个 div 的索引替换 i 。

$($inputs[0]).find('.input').focus(function() {
    $($infoBoxes[0]).slideDown();
})
$($inputs[0]).find('.input').blur(function() {
    $($infoBoxes[0]).slideUp();
})
repeat...
repeat...
repeat...

这可行，但不是很干燥。我正在寻找一个更好的解决方案，不会让我重复一堆代码。

Answer 1

第一个代码将不起作用，因为您对所有内部函数使用相同的变量。您应该将其包装到函数中，该函数将为索引创建局部变量。尝试以下代码:

var $inputs = $('.inputs').children();
var $infoBoxes = $('.infoBoxes').children(); 

for(var i = 0; i < $inputs.length; i++ ) {
    (function(ix) {
      $($inputs[ix]).find('.input').focus(function() {
        $($infoBoxes[ix]).slideDown();
      })
      $($inputs[ix]).find('.input').blur(function() {
        $($infoBoxes[ix]).slideUp();
      })
    })(i);
}