javascript – Durchlaufen Sie img, um das aktuell angeklickte img-Attribut abzurufen

Hallo zusammen, ich bin etwas nervös, wenn ich zum ersten Mal Fragen stelle, und hoffe, gemeinsam mit allen voranzukommen. Das Problem ist folgendes: Ich durchlaufe eine Gruppe von Bildern und möchte den Index des aktuell angeklickten Bildes erhalten. Ich habe dem Bild ein Num-Attribut hinzugefügt, um den Schlüssel des Elements zu erhalten.

<code>{foreach from=$answers item=item key=key }
<img src="{$item.img}" num="{$key}" onclick="selectImg(this)" class="funny-img" 
style=" width: 23%;margin: 0 1% 4% 1%;float: left; opacity: 0.6;">     
{/foreach}

这是遍历的img</code>

<code>
//打印当前元素
function selectImg(a){

    console.log(a)

}

</code>

Ich habe festgestellt, dass console.log(this.num) undefiniert ist. Jetzt weiß ich nicht, wie ich es bekomme.

Antwortinhalt:

Hallo zusammen, ich bin etwas nervös, wenn ich zum ersten Mal Fragen stelle, und hoffe, gemeinsam mit allen voranzukommen. Das Problem ist folgendes: Ich durchlaufe eine Gruppe von Bildern und möchte den Index des aktuell angeklickten Bildes erhalten. Ich habe dem Bild ein Num-Attribut hinzugefügt, um den Schlüssel des Elements zu erhalten.

<code>{foreach from=$answers item=item key=key }
<img src="{$item.img}" num="{$key}" onclick="selectImg(this)" class="funny-img" 
style=" width: 23%;margin: 0 1% 4% 1%;float: left; opacity: 0.6;">     
{/foreach}

这是遍历的img</code>

<code>
//打印当前元素
function selectImg(a){

    console.log(a)

}

</code>

Ich habe festgestellt, dass console.log(this.num) undefiniert ist. Jetzt weiß ich nicht, wie ich es bekomme.

<code><div id='wrap'>
    <img src="image/1.jpg" alt="" num="1">
    <img src="image/2.jpg" alt="" num='2'>
    <img src="image/3.jpg" alt="" num='3'>
    <img src="image/4.jpg" alt="" num='4'>
</div>
<script type="text/javascript">
    var wrap=document.getElementById("wrap");

    var imgs=wrap.getElementsByTagName('img');
    console.log(imgs.length);
    for(var i in imgs){
        imgs[i].index=i;
        imgs[i].onclick=function(){
            alert(this.getAttribute('num'));
            console.log(this.index);
        }
    }
</script></code>

this.getAttribute("num");
Versuchen Sie dies

Wenn Sie das Prinzip nicht verstehen, verwenden Sie einfach jq, um ein Klickereignis an das img-Tag zu binden. Wenn Sie das gewünschte Bild erhalten möchten, verwenden Sie this.getAttribute("attribute". );