동일한 id를 가진 요소 인식

Question

for 루프를 사용하여 일부 요소를 만들었으므로 값과 소스를 얻고 싶었지만 그렇게 할 수없는 것 같습니다.

나는 무엇을했는지에 대한 데모를 만들었습니다 here.

내 함수는 루프 마지막에있는 요소 인 for에서만 작동하는 것 같습니다.

$("#emprev").click(function(){ 
    var hisval = $(this).attr("value"); 
    var hissrc = $(this).attr("src"); 
    alert(hisval); 
    alert(hissrc); 
}); 

Answer 1

id 속성은 고유해야합니다, 그래서 당신은 자신의 ID로 요소를 얻기 위해 jQuery를 사용하는 경우에만 첫 번째 요소를 얻을 것이다 (# 사용).

대신 클래스를 사용한다 : 나는 또한 몇 가지 작은 변화를 만들어

var emval = [':D',':C','8)',':O',':)','._.',':heart:',':P',';P',';)',':(','.-.','-.-']; 
 
var emsrc = ['http://emojipedia-us.s3.amazonaws.com/cache/18/2f/182fa3786046d170707fa46a257185cb.png','http://emojipedia-us.s3.amazonaws.com/cache/c5/a5/c5a5a52fa1633e19ab2648f23ab1ee37.png','http://emojipedia-us.s3.amazonaws.com/cache/c1/2c/c12c7f3797ed8fcdcbedffb2649abfb1.png','http://emojipedia-us.s3.amazonaws.com/cache/55/af/55af488f029266842c13a54d4c50fc11.png','http://emojipedia-us.s3.amazonaws.com/cache/be/22/be22105632cfc32abf7b24bed3924e12.png','http://emojipedia-us.s3.amazonaws.com/cache/ce/1a/ce1a33d6a4535ce73c8b2b899d51071b.png','http://emojipedia-us.s3.amazonaws.com/cache/3e/f0/3ef0aeaf797844b672df6198c53ba479.png','http://emojipedia-us.s3.amazonaws.com/cache/43/be/43be98eee74f44eddec9c3137b1edf28.png','http://emojipedia-us.s3.amazonaws.com/cache/7e/d5/7ed517c9f335c3171b6f92685514667a.png','http://emojipedia-us.s3.amazonaws.com/cache/58/be/58be1ae13dbf3fb471f7f598a0365734.png','http://emojipedia-us.s3.amazonaws.com/cache/0c/04/0c04f9fd77dc486724c269587028e7d2.png','http://emojipedia-us.s3.amazonaws.com/cache/e6/7c/e67c860bd5cd2b9b443516171ec3c6a3.png','http://emojipedia-us.s3.amazonaws.com/cache/c1/05/c105ab901e2fa6e67b38879bcc0ac0b0.png']; 
 

 

 
$(document).ready(function() { 
 
    for (var i = 0; i <= 12; i++) { 
 
    img = $('<img class="emprev" width="32px" height="32px" style="margin-bottom:3px;margin-left:4px;margin-top:2px">') 
 
    img.attr("value", emval[i]); 
 
    img.attr("src", emsrc[i]); 
 
    $("#emoji-list").prepend(img) 
 
    } 
 

 
    $(".emprev").click(function(){ 
 
    var hisval = $(this).attr("value"); 
 
    var hissrc = $(this).attr("src"); 
 
    alert(hisval); 
 
    alert(hissrc); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="emoji-list" style="display:block;width:290px;height:200px;background:#ecebeb;border:1px solid black;border-radius:5px;position:absolute;bottom:150px;left:52%;z-index:9999999"></div>

참고 : 여기에

$(".emprev").click(function(){ 
    var hisval = $(this).attr("value"); 
    var hissrc = $(this).attr("src"); 
    alert(hisval); 
    alert(hissrc); 
}); 

이 코드에 대한 업데이트입니다 귀하의 코드가 올바르게 작동하는지 확인하십시오