jqueryが間違ったデータを返します

Question

jqueryが新しくなりました。コードで奇妙なことが起こっています。 Jqueryは常に同じ番号を返します。問題はどこだ？コードは以下に含まれています。 HTMLコード変更に

$(".image-upload").on("change", function() { 
 
    console.log($(this).children("label").find("img").attr("data-id")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-2"> 
 
    <div class="image-upload"> 
 
    <label for="file-input"> 
 
<img src="<?= base_url("upload.png"); ?>" width="100" height="100" data-id="1"/> 
 
</label> 
 
    <input name="photos[]" id="file-input" type="file" data-ids="1" /> 
 
    </div> 
 
</div> 
 
<div class="col-md-2"> 
 
    <div class="image-upload"> 
 
    <label for="file-input"> 
 
\t <img src="<?= base_url("upload.png"); ?>" width="100" height="100" data-id="2"/> 
 
</label> 
 
    <input name="photos[]" id="file-input" type="file" data-ids="2" /> 
 
    </div> 
 
</div>

、コンソールショー1、押されたののimgウィッヒに関係なく起動されます。どうして？

Answer 1

それはこのようにそれを書くことのように思える：

$(this).children("label").children("img").attr("data-id") 

意志出力正しいデータ-ID。 "find"ではなく "children"の使用に注意してください。

また、問題を実行してテストするのが簡単になるように、いくつかのタイプのオンラインの例を提供する方が良いでしょう。 https://jsfiddle.net/947f2hhf/

Answer 2

<div class="col-md-2"> 
        <div class="image-upload"> 
         <label for="file-input"> 
          <img src="<?= base_url("upload.png"); ?>" width="100" height="100" data-id="1"/> 
         </label> 
         <input name="photos[]" id="file-input" type="file" data-ids="1"/> 
        </div> 
       </div> 
       <div class="col-md-2"> 
        <div class="image-upload"> 
         <label for="file-input"> 
          <img src="<?= base_url("upload.png"); ?>" width="100" height="100" data-id="2"/> 
         </label> 
         <input name="photos[]" id="file-input2" type="file" data-ids="2" /> 
        </div> 
       </div> 

htmlタグIDは一意であることが必要。変更する必要があります。2番目のファイル入力タグ 'id'。 「変更「オン」だから、