> 백엔드 개발 > PHP 튜토리얼 > javascript - img를 탐색하여 현재 클릭된 img 속성을 가져옵니다.

javascript - img를 탐색하여 현재 클릭된 img 속성을 가져옵니다.

WBOY
풀어 주다: 2016-09-12 17:44:46
원래의
1310명이 탐색했습니다.

안녕하세요 여러분, 처음으로 질문을 하게 되어 조금 떨리네요. 모두와 함께 발전해 나가고 싶습니다. 문제는 img 그룹을 탐색하고 현재 클릭한 img의 첨자를 얻으려고 합니다. 현재 img의 키를 얻기 위해 img에 num 속성을 추가했습니다.

<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>
로그인 후 복사
로그인 후 복사

javascript - img를 탐색하여 현재 클릭된 img 속성을 가져옵니다.

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

    console.log(a)

}

</code>
로그인 후 복사
로그인 후 복사

javascript - img를 탐색하여 현재 클릭된 img 속성을 가져옵니다.

console.log(this.num)가 정의되지 않은 것으로 나타났습니다. 다양한 방법을 시도했지만, 이를 얻는 방법을 알려주세요.

답글 내용:

안녕하세요 여러분, 처음으로 질문을 하게 되어 조금 떨리네요. 모두와 함께 발전해 나가고 싶습니다. 문제는 img 그룹을 탐색하고 현재 클릭한 img의 첨자를 얻으려고 합니다. 현재 img의 키를 얻기 위해 img에 num 속성을 추가했습니다.

<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>
로그인 후 복사
로그인 후 복사

javascript - img를 탐색하여 현재 클릭된 img 속성을 가져옵니다.

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

    console.log(a)

}

</code>
로그인 후 복사
로그인 후 복사

javascript - img를 탐색하여 현재 클릭된 img 속성을 가져옵니다.

console.log(this.num)가 정의되지 않은 것으로 나타났습니다. 다양한 방법을 시도했지만, 이를 얻는 방법을 알려주세요.

<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");
이것을 시도해 보세요

원리를 이해하지 못한다면 jq를 사용하여 클릭 이벤트를 img 태그에 바인딩하세요. 원하는 것을 얻으려면 this.getAttribute("attribute"를 사용하세요. );

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿