Question

我有两个父div：.inputs和.infoBoxes。他们每个人都有相同数量的孩子。当用户点击.input中的第一个.inputs时，.infoBox中的第一个.infoBoxes应为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);
}

Answer 2

slideDown用于显示元素。我猜你要隐藏元素，因为你点击它们而你不能点击一个隐藏的元素。使用hide或slideUp隐藏元素。

＆＃13;

$(".input, .infobox").on("click", function() {
  var ind = $(this).index();
  $(".infobox:eq(" + ind + "), .input:eq(" + ind + ")").hide(500);
});

＆＃13;

.input,
.infobox {
  widht: 100%;
  height: 50px;
  text-align: center;
  margin: 5px 0;
  color: white;
}
.input {
  background: red;
}
.infobox {
  background: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputs">
  <div class="input">1</div>
  <div class="input">2</div>
  <div class="input">3</div>
  <div class="input">4</div>
  <div class="input">5</div>
</div>
<div class="infoboxes">
  <div class="infobox">1</div>
  <div class="infobox">2</div>
  <div class="infobox">3</div>
  <div class="infobox">4</div>
  <div class="infobox">5</div>
</div>

＆＃13;

用jquery把一个div的孩子绑在另一个div的孩子身上

2 个答案: