[javascript] jQuery를 사용하여 이미지 소스 변경

내 DOM은 다음과 같습니다.

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

누군가가 이미지를 클릭하면 이미지 src를 이미지 번호 1 또는 2를 나타내는 <img src="imgx_off.gif">위치 로 변경하고 싶습니다 x.

이것이 가능합니까 아니면 이미지를 변경하기 위해 CSS를 사용해야합니까?

답변

jQuery의 attr () 함수를 사용할 수 있습니다 . 예를 들어 img태그의 id속성이 ‘my_image’인 경우 다음을 수행하십시오.

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

그런 다음 srcjQuery를 사용하여 이미지의 이미지를 다음과 같이 변경할 수 있습니다 .

$("#my_image").attr("src","second.jpg");

이것을 click이벤트에 첨부하려면 다음과 같이 쓸 수 있습니다.

$('#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);
    }
});

답변

이미지 소스를 변경할 때 사람들이 흔히 저지르는 실수 중 하나는 이미지 크기를 성숙시키는 등의 후속 작업을 수행하기 위해 이미지로드를 기다리지 않는 것입니다. 이미지로드 후 작업을 수행하려면 jQuery .load()메소드를 사용해야 합니다.

$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});

편집 사유 : https://stackoverflow.com/a/670433/561545

답변

자세한 내용은. 예를 들어 구문을 사용하여 광고 이미지에 대한 jquery에서 attr 메소드로 src 속성을 설정하려고합니다.$("#myid").attr('src', '/images/sample.gif');

이 솔루션은 유용하며 작동하지만 경로를 변경하면 이미지의 경로도 변경되고 작동하지 않습니다.

이 문제를 해결하려고했지만 아무것도 찾지 못했습니다.

해결책은 경로의 시작 부분에 ‘\’를 넣는 것입니다.
$("#myid").attr('src', '\images/sample.gif');

이 트릭은 나에게 매우 유용하며 다른 사람들에게도 유용하기를 바랍니다.

답변

jQuery 또는 기타 리소스 킬링 프레임 워크가있는 경우 (간단한 트릭을 위해 각 사용자가 매번 다운로드하는 많은 KB) 네이티브 JavaScript (!) :

<img src="img1_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">

이것은 일반적이고 더 우아하게 쓰여질 수 있습니다 :

<html>
<head>
<script>
function switchImg(img){
    img.src = img.src.match(/_on/) ?
        img.src.replace(/_on/, "_off") :
        img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
    <img src="img1_on.jpg" onclick="switchImg(this)">
    <img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>

답변

나는 어떻게 이미지를 변경하는 방법을 보여 드리겠습니다 src, 그래서 당신은 (당신의 당신의 HTML에있는 모든 이미지를 회전 이미지를 클릭하면 d1ID와 c1특별히 클래스) … 당신이이 개 있는지 이상의 이미지 를 HTML의를 .

또한 문서가 준비된 후 페이지를 정리하여 처음에는 하나의 이미지 만 표시되도록하는 방법도 보여줍니다.

전체 코드

$(function() {

    var $images = $("#d1 > .c1 > a").clone();

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );

    $("#d1 > .c1 > a").click(function(event) {

        $(this).children().attr("src",
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

고장

이미지가 포함 된 링크의 사본을 작성하십시오 (참고 : 추가 기능을 위해 링크의 href 속성을 사용할 수도 있습니다 (예 : 각 이미지 아래에 작업 링크 표시 )).
```
    var $images = $("#d1 > .c1 > a").clone();  ;
```
HTML에 몇 개의 이미지가 있는지 확인하고 어떤 이미지가 표시되는지 추적하는 변수를 만듭니다.
```
var $length = $images.length;
var $imgShow = 0;
```
첫 번째 이미지 만 표시되도록 문서의 HTML을 수정하십시오 . 다른 모든 이미지를 삭제하십시오.
```
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); 
```
이미지 링크를 클릭 할 때 처리 할 함수를 바인딩하십시오.
```
    $("#d1 > .c1 > a").click(function(event) {
        $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();
    });
```
위 코드의 핵심은 ++$imgShow % $length이미지가 포함 된 jQuery 객체를 순환 하는 데 사용 됩니다. ++$imgShow % $length먼저 카운터를 1 씩 늘린 다음 이미지가 몇 개인 지 그 숫자를 수정합니다. 이렇게하면 결과 인덱스 순환이에서 0까지 ( 개체 length-1의 인덱스)로 유지 $images됩니다. 즉,이 코드는 2, 3, 5, 10 또는 100 개의 이미지에서 작동합니다. 각 이미지를 순서대로 순환하고 마지막 이미지에 도달하면 첫 번째 이미지에서 다시 시작합니다.

또한 .attr()이미지의 “src”속성을 가져오고 설정하는 데 사용됩니다. $images객체 중에서 요소를 선택하기 위해 양식을 사용하여 jQuery 컨텍스트$images 로 설정 했습니다 . 그런 다음 관심있는 특정 색인을 가진 요소 만 선택합니다.$(selector, context).eq()

3 개의 이미지가있는 jsFiddle 예제

srcs를 배열에
저장할 수도 있습니다 .
3 개의 이미지가있는 jsFiddle 예제

다음은 이미지 주위의 앵커 태그에서 href를 통합하는 방법입니다.
jsFiddle 예제

답변

이것이 효과가 있기를 바랍니다.

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>

$(document).ready(function() {
    var flag = 0;
    $("button#changeSize").click(function() {
        if (flag == 0) {
            $("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
            flag = 1;
        } else if (flag == 1) {
            $("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
            flag = 0;
        }
    });
});

답변

다음과 같이 이미지 태그에 id 속성을 추가해야합니다.

<div id="d1">
   <div class="c1">
            <a href="#"><img id="img1" src="img1_on.gif"></a>
            <a href="#"><img id="img2" src="img2_on.gif"></a>
   </div>
</div>

그런 다음이 코드를 사용하여 이미지 소스를 변경할 수 있습니다.

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });