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

763

내 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를 사용해야합니까?

javascript  jquery  image 
— 사용자 67033
소스
당신이 jQuery를 사용하여 무언가를 원하는 경우에 당신은 보길 원하는 것일 수도 jQuery를주기 플러그인, scrollRight 데모 (오른쪽 아래 예)
— TomHastjarjanto
43
jQuery ( "# my_image"). attr ( "src", "first.jpg")
— manish nautiyal
9
당신은 jonstjohn의 대답을 정말로 받아 들여야합니다. 그것은 대답을 받아 들일 수 있도록 질문을 향상시킬 것입니다.
— Xcelled
4
날짜까지, 즉 19th July, 2016 15:39 PM질문 공증 횟수 369 및 @jonstjohn 답변 공감 횟수 931 . 그러나 그런 나쁜 행운, @OP는 이후에 로그인하지 않았습니다 Feb 17 '09 at 2:57. :(그리고 @jonstjohn 답변은 표시되지 않은 상태로 유지 됩니다.
— Nana Partykar
@Xcelled, 유일한 문제는 jonstjohn의 대답이 질문에 대답하지 않는다는 것입니다. 사소한 점이지만 가치가 있습니다. 실제로 질문에 올바르게 대답하는 유일한 방법이므로 inco의 답변을 살펴보십시오.
— David Newcomb 2016 년

답변:

1686

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);
    }
});
— 존 스트 존
소스
79

이미지 소스를 변경할 때 사람들이 흔히 저지르는 실수 중 하나는 이미지 크기를 성숙시키는 등의 후속 작업을 수행하기 위해 이미지로드를 기다리지 않는 것입니다. 이미지로드 후 작업을 수행하려면 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

— 모센
소스
예. 이것은 마침내 속임수를 썼다. .destroy ()는 충분히 멀지 않습니다. 다양한 크기의 이미지를 교체 할 때 모든 HTML을 초기화하고 다시 초기화하는 것보다 실제로 작동합니다.
— Matt J.
특히 이미지가 캐시에있는 경우로드가 안정적으로 실행되지 않습니다. jQuery 설명서를 참조하십시오.
— Twilite
19

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

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

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

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

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

— wphonestudio
소스
18

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>
— 인코
소스
얼마나 많은 사람들이 질문을 읽지 못하고 요청 된 답변을 줄 수 없는지 항상 놀랍습니다. OP가 2 가지 예를 제시 한 이유는 일반적인 해결책을 찾고 있다는 것이 나에게 명백해 보였다. 그러나 다른 모든 사람들은 그것을 완전히 놓칠뿐만 아니라 질문에 대답하지 않은 대답을하는 것처럼 보였습니다. :(
— David Newcomb 2016 년
17

나는 어떻게 이미지를 변경하는 방법을 보여 드리겠습니다 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 예제

— 피터 아지 타이
소스
17

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

<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;
        }
    });
});
— 지산
소스
이 코드 스 니펫은 문제를 해결할 수 있지만 설명을 포함하면 게시물의 품질을 향상시키는 데 실제로 도움이됩니다. 앞으로 독자들에게 질문에 대한 답변을 제공하므로 해당 사람들이 코드 제안의 이유를 모를 수도 있습니다.
— 데릭 브라운
감사합니다 Derek은 다음 번
— 부터이
14

다음과 같이 이미지 태그에 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" });
    });
— 미스터 비트 맵
소스
9

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

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

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

— 페르난도 에셔
소스
5
이 구문이 맞지 않습니다. jquery attr () 함수는 1 또는 2 개의 매개 변수를 사용합니다. 첫 번째는 HTML 속성 이름이있는 문자열이고 두 번째는 설정하려는 해당 속성의 값입니다.
— Thiago Silva
7

보안 문자 버튼을 호출하려고 할 때도 같은 문제가있었습니다. 일부 검색 후 이제 아래의 기능이 거의 모든 유명한 브라우저 (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을 생성하는 것입니다.

— 카이 반 테라 니
소스
7

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);
        }
    });
— 아비 짓 푸 자리
소스
7

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

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());
— 긴 쓰쿠 로이
소스
1
적어도 마지막에 임의의 문자열을 추가하는 것이 매우 중요합니다! 탱크!
— Marcelo Sader
3

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

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

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

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;
— 레이몬드 와카가
소스
1

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

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});
— 실라 호스
소스
-1

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>
스 니펫 확장

— 아브 라르 야힌
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.