여러 개 이미지 속성 값 변경하기 data()

 

attr메서드를 사용해서 여러 개 이미지 속성 값을 변경할 경우

아래의 코드를 data()메서드를 사용한 형태로 변경해 보자

<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">

 

 

data() 메서드

<script>
    $(document).ready(function() {
        var $imgList = $(".img");

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

            var img = !$img.data("img");/* data-img 내용이 아닌내용을 img변수에 넣는다. */
            $img.data("img",img);

            if(img)
                $img.attr("src","img2.png");
            else
                $img.attr("src","img1.png");
        })
    })
</script>

<img src="img2.png" class="img" data-img="true"> //data- 속성 추가
<img src="img2.png" class="img" data-img="true"> //data- 속성 추가
<img src="img2.png" class="img" data-img="true"> //data- 속성 추가

 

data() 메서드를 사용하면 인덱스 값에 접근해야 할 필요가 없기 때문에 더 간결하게 적용 가능하다.