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는 고유해야한다. 변경해야 함 두 번째 파일 입력 태그 'id'. '변화'에 '그래서