1つのdivの子供をjqueryの別のdivの子供に結ぶ

Question

私は2つの親div：.inputsと.infoBoxesを持っています。それぞれには同数の子供がいます。ユーザーが最初に.inputにある.inputsをクリックすると、最初の.infoBoxは.infoBoxesになります。slideDown()になります。 2番目、3番目などと同じです。私は、このコードを同じコードを各ペアに書き直さなければ、これをしたいと思います。これまでのところ私がしている：

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を使用します。

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

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

<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>