본문 바로가기
javaScript/jQuery

이미지 여러 개 속성 값 변경 attr()

by mooyou 2023. 2. 19.
728x90
300x250
SMALL

속성값 변경 attr() 매서드 사용

$대상.attr("속성이름","값")

 

 

이미지가 한 개일 경우

 

이미지를 클릭할 때마다 번갈아 이미지 변경되게 하기

<script>

    $(document).ready(function() {
        var $img = $(".img");
        var chk = true;

        $img.click(function(){
            if(chk)
                $img.attr("src","img1.png");
            else
                $img.attr("src","img2.png");
            chk = !chk;
        })

    })
</script>


<img src="img2.png" class="img">

 

이미지가 여러 개 일 경우

<script>
    $(document).ready(function() {
        var $imgList = $(".img");
        var chk = [true, true, true];

        $imgList.click(function(){
            var $img = $(this);
            var index = $imgList.index($img);

            if(chk[index])
                $img.attr("src","img1.png");
            else
                $img.attr("src","img2.png");
            chk[index] = !chk[index];
        })
    })
</script>

<img src="img2.png" class="img">
<img src="img2.png" class="img">
<img src="img2.png" class="img">
728x90
반응형
LIST

댓글