jQuery를 이용한 Image 태그 src변경하기 (클릭시 로테이션)

jQuery를 이용한 <image src="{경로}" />의 경로 변경하기

이미지 변경 방법은 jQuery의 attr() 함수의 src 속성을 변경으로 가능합니다.

 

 

 

<img id="my_image" src="first.jpg"/>

..

// 이미지 변경하기
$("#my_image").attr("src","second.jpg");
..

// 이미지 클릭시 변경
$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});
..

// 이미지 클릭시 로테이션으로 변경하기
$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

 

참고: https://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery

 

 

 

추가로 비교연산자

비교 연산자(Comparison operators)

=== (identity operator)와 == (equality operator)차이점 메모

== operator는 type변환후에 동등성을 비교.

=== operator는 type변환을 수행하지 않고, 단순 유형만을 비교.

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true

' \t\r\n ' == 0     // true

 

 

==와 ===의 비교 예제

var a = [1,2,3];
var b = [1,2,3];

var c = { x: 1, y: 2 };
var d = { x: 1, y: 2 };

var e = "text";
var f = "te" + "xt";

a == b            // false
a === b           // false

c == d            // false
c === d           // false

e == f            // true
e === f           // true


// == 객체값 비교, === 유형까지 비교.
"abc" == new String("abc")    // true
"abc" === new String("abc")   // false

 

참고:

https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons

http://www.c-point.com/javascript_tutorial/jsgrpComparison.htm

http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3