jquery src 속성 변경 끝

Question

좋아요, 그래서 두 이미지 사이를 토글 전환하려고합니다. 하나는 애니메이션 GIF이고 다른 하나는 jpg입니다. 기본적으로 클라이언트는 제품의 기능에 대한 애니메이션 GIF 톤을 원하지만 실제로 사용하기 때문에 스위치를 켜고 끌 수 있습니다. 그래서 모든 클래스의 이미지를 가지고 있는지 궁금 해서요, src의 나머지 부분이 모두 다르기 때문에 gif에서 jpg로 모든 이미지의 마지막 세 문자를 변경하는 토글을 설정할 수 있습니까?

분명히 작동하지 않지만 논리를 따라갈 수 있기를 바랍니다.

$('img.img-toggle').click(function() { 
if() //If the image ends in .jpg 
{ 
    //Somehow strip the attribute of .jpg 
    //Somehow append the attribute to add .gif 
} else { 
    //Somehow stip the attribute of .gif 
    //Somehow append the attribute to add .jpg 
} 
});​ 

의견이 있으십니까? 내 논리가 어리석은 또 다른 옵션도 좋을 것이다. 나는 이것에 대해 새로운 점이있다. 나는 여러 가지 일을 시도했지만 알아낼 수 없었습니다. 사전에

감사합니다, 케빈

Answer 1

을 당신이 여기에 모든 이미지에 대해이 작업을 실행하십시오.

$('img.img-toggle').click(function() { 
    (".imgClass").each(function() { 

     var src = $(this).prop("src"); 

     if(/\.jpg$/i.test(src)) { 
      $(this).prop("src", src.replace(/\.jpg$/, ".gif")); 
     } else { 
      $(this).prop("src", src.replace(/\.gif$/, ".jpg")); 
     } 
    }); 
}); 

Answer 2

한 가지 방법 ... 이런 식으로 뭔가를 할 것

$('img.img-toggle').click(function() { 
    var src = $(this).attr("src"); 
    if (src.indexOf(".jpg") != -1) //If the image ends in .jpg 
    { 
     src = src.replace(".jpg", ".gif"); 
    } else { 
     src = src.replace(".gif", ".jpg"); 
    } 
    $(this).attr("src", src); 
}); 

Answer 3

우리는 이미지에서 마지막 세 가지 또는 네 개의 문자를 잡을 수 SRC 문자열 및 그것을 비교하십시오.

$('img.img-toggle').click(function() { 
    var ending = this.src.slice(-3); 

    switch(ending) { 
     case 'jpg': 
      this.src = this.src.replace(/jpg$/, 'gif'); 
      break; 
     case 'gif': 
      this.src = this.src.replace(/gif$/, 'jpg'); 
      break; 
    } 
}); 

은 내가 switch/case이 단지의 경우 미래에 더 형식이있을 수 있습니다 사용.

또 다른 옵션은 자동으로 제공하는 데 필요한 두 가지 기능 사이를 전환합니다

$('img.img-toggle').toggle(function() { 
    this.src = this.src.replace(/jpg$/, 'gif'); 
}, function() { 
    this.src = this.src.replace(/gif$/, 'jpg'); 
}); 

.toggle() 같은 방법으로 jQuerys에게 .toggle() 방법을 사용하는 것입니다.

Answer 4

$('img.img-toggle').click(function() { 
    var src = $(this).attr("src"); 
    if (src.indexOf(".jpg") != -1) { 
     $(this).attr("src", src.replace(".jpg", ".gif")); 
    } 
    else { 
     $(this).attr("src", src.replace(".gif", ".jpg")); 
    } 
});​ 

Answer 5

이 시도 :

$('img.img-toggle').click(function() { 
    var $img = $(this); 
    var src = $img.prop('src'); 
    if (src.match(/\.jpg$/)) { 
     $img.prop('src', src.replace(/\.jpg$/, '.gif')); 
    } else { 
     $img.prop('src', src.replace(/\.gif$/, '.jpg')); 
    } 
}); 

Example fiddle

Answer 6

$('img.img-toggle').click(function() { 
    src = $(this).attr('src'); 
    if (src.substr(src.length - 4) == ".jpg") //If the image ends in .jpg 
    { 
     src = src.replace(".jpg", ".gif"); 
    } else { 
     src = src.replace(".gif", ".jpg"); 
    } 
});​