複数のファイル入力がcssとjavascriptの問題を表示する

Question

こんにちは、5枚の写真をアップロードするのに複数の入力がありますが、CSSが正しく表示されていない（テキストブロックの最初のものにのみ影響します）正しい入力に変換します。

<div class="form-group col-md-12" id="imagesSup"> 
    <label for="imagesSup" class="col-md-12">Images supplémentaires: </label> 
    <div class="image"> 
     <img src='' class="conteneurImagesSup col-md-2" id="conteneurImagesSup0"> 
     <p><span>Chargez une image</span></p> 
     <input type="file" name="imagesSup[]" id="imageSup0" class="inputImagesSup" style="display: none"> 
    </div> 
    <div class="image"> 
     <img src='' class="conteneurImagesSup col-md-2" id="conteneurImagesSup1"> 
     <p><span>Chargez une image</span></p> 
     <input type="file" name="imagesSup[]" id="imageSup1" class="inputImagesSup" style="display: none"> 
    </div> 
    <div class="image"> 
     <img src='' class="conteneurImagesSup col-md-2" id="conteneurImagesSup2"> 
     <p><span>Chargez une image</span></p> 
     <input type="file" name="imagesSup[]" id="imageSup2" class="inputImagesSup" style="display: none"> 
    </div> 
    <div class="image"> 
     <img src='' class="conteneurImagesSup col-md-2" id="conteneurImagesSup3"> 
     <p><span>Chargez une image</span></p> 
     <input type="file" name="imagesSup[]" id="imageSup3" class="inputImagesSup" style="display: none"> 
    </div> 
    <div class="image"> 
     <img src='' class="conteneurImagesSup col-md-2" id="conteneurImagesSup4"> 
     <p><span>Chargez une image</span></p> 
     <input type="file" name="imagesSup[]" id="imageSup4" class="inputImagesSup" style="display: none"> 
    </div> 
</div> 

CSS：私たちは4テキストブロックが欠落している見ることができ、この結果を、与える

.conteneurImagesSup{ 
    height: 160px; 
    border: dashed darkgrey medium; 
    border-radius: 5px; 
    margin-right: 25px; 
    text-decoration: none; 
    text-align: center; 
    padding: 0; 
} 

.image { 
    position: relative; 
    cursor:pointer; 
} 
.image p { 
    position: absolute; 
    top: 60px; 
    left: 0; 
} 
.image p span { 
    color: white; 
    font: bold medium Helvetica, Sans-Serif; 
    letter-spacing: -1px; 
    background: rgb(0, 0, 0); /* fallback color */ 
    background: rgba(0, 0, 0, 0.7); 
    padding: 10px; 
} 

：

は、だから私は、5入力のために、このHTML構造を持っています

最後に、私がpicturを追加すると私たちを与える

for(var i=0; i<4; i++) 
{ 
    $("#conteneurImagesSup"+i).on('click', function(e){ 
     e.preventDefault(); 
     $("#imageSup"+i).trigger('click'); 
    }); 
} 

$(".inputImagesSup").change(function(event) { 
    $(this).siblings("img").attr('src',URL.createObjectURL(event.target.files[0])); 
}); 

：

Answer 1

E私はimgだけで、それに対応する影響を与えるために使用する方法は、最後の1に影響を与えるものは何でも、それは、対応するフィールドに表示させたいが、私は最後の広場に常に表示されているイメージについてだけ説明することができます。

あなたは、forループを持っている：以下同じである

for(var i=0; i<4; i++) 
{ 
    // smthg not relevent now 
} 

：

var i = 0; 
for (; i<4; i++){ // I want to explain you that i is declared out of the scope of the for loop. 

} 

ので、以下のときに実行されます。

$("#conteneurImagesSup"+i).on('click', function(e){ 
    //not relevant now 
}); 

私は値があなたを持っています彼に持って欲しい。

しかし、 "sub"関数が呼び出されたとき（$("#imageSup"+i).trigger('click');）、iはforスコープから宣言されましたが、現在持っている最後の値を持っています（4）。

あなたはそれが正しく動作するようにしたいのであれば、あなたがの範囲内で新しい変数を宣言する必要があります：

for(var i=0; i<4; i++) 
{ 
    var index = i; 
    $("#conteneurImagesSup"+i).on('click', function(e){ 
     e.preventDefault(); 
     $("#imageSup"+index).trigger('click'); 
    }); 
} 

Answer 2

私がなぜ最初の正方形ショー」になどわからないんだけどChargezの宇根画像」が、持っている1発言：

• あなたは、また最後の画像（conteneurImagesSup4）と一致forループのiが到達したことを確認するには4：for (var i = 0; i < 5; i += 1)

Answer 3

私はjqueryの問題を解決したので、i値をイベントデータに渡す必要があります。そうしないと、最後の値はiになります。 https://api.jquery.com/event.data/

しかし、まだCSSの問題を解決できません。