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();

    });
});

고장

1. 이미지가 포함 된 링크의 사본을 작성하십시오 (참고 : 추가 기능을 위해 링크의 href 속성을 사용할 수도 있습니다 (예 : 각 이미지 아래에 작업 링크 표시 )).

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

2. HTML에 몇 개의 이미지가 있는지 확인하고 어떤 이미지가 표시되는지 추적하는 변수를 만듭니다.

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

3. 첫 번째 이미지 만 표시되도록 문서의 HTML을 수정하십시오 . 다른 모든 이미지를 삭제하십시오.

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

4. 이미지 링크를 클릭 할 때 처리 할 함수를 바인딩하십시오.

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

이 방법으로 jQuery를 사용하여이 작업을 수행 할 수도 있습니다.

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

이미지 소스에 여러 상태가있는 경우 조건이있을 수 있습니다.

보안 문자 버튼을 호출하려고 할 때도 같은 문제가있었습니다. 일부 검색 후 이제 아래의 기능이 거의 모든 유명한 브라우저 (chrome, Firefox, IE, Edge 등)에서 제대로 작동합니다.

function recaptcha(theUrl) {
  $.get(theUrl, function(data, status){});
  $("#captcha-img").attr('src', "");
  setTimeout(function(){
       $("#captcha-img").attr('src', "captcha?"+new Date().getTime());
  }, 0);
 }

'theUrl'은 새로운 보안 문자 이미지를 렌더링하는 데 사용되며 귀하의 경우 무시할 수 있습니다. 가장 중요한 점은 FF와 IE가 이미지를 다시 렌더링하도록하는 새로운 URL을 생성하는 것입니다.

jQuery를 사용하여 이미지 소스 변경 click()

요소:

    <img class="letstalk btn"  src="images/chatbuble.png" />

암호:

    $(".letstalk").click(function(){
        var newsrc;
        if($(this).attr("src")=="/images/chatbuble.png")
        {
            newsrc="/images/closechat.png";
            $(this).attr("src", newsrc);
        }
        else
        {
            newsrc="/images/chatbuble.png";
            $(this).attr("src", newsrc);
        }
    });

이미지를 여러 번 업데이트했는데 이미지가 캐시 되어 업데이트되지 않으면 끝에 임의의 문자열을 추가하십시오.

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());

오늘도 똑같은 궁금증이 있습니다.

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});

이것은 바닐라 (또는 단순히 순수한) JavaScript로 수행 할 수있는 보장 된 방법입니다.

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;

더 작게 만들기 위해 추가하십시오.

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});

CSS로 이미지 소스를 변경하는 방법은 없습니다.

가능한 유일한 방법은 Javascript 또는 jQuery 와 같은 Javascript 라이브러리를 사용하는 것 입니다.

논리-

이미지는 div 안에 있으며 해당 이미지가 class없거나 id해당 이미지가 있습니다.

따라서 논리는 div이미지가있는 내부 요소를 선택합니다 .

그런 다음 루프가있는 모든 이미지 요소를 선택하고 Javascript / jQuery를 사용하여 이미지 src를 변경하십시오 .

데모 출력이있는 예제 코드

$(document).ready(function()
{
    $("button").click(function()
    {
      $("#d1 .c1 a").each(function()
      {
          $(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');
      });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

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

<button>Change The Images</button>