Javascript는 밑줄 뒤에 텍스트를 바꿉니다.

Question

파일 이름의 밑줄 뒤에 일부 텍스트를 바꾸려고합니다.

예제 파일 이름 : FileName_true.png. 이 번호를 FileName_false.png으로 변경해야합니다.

기본적으로 이미지를 클릭하면 변경할 수 있습니다. (흑백과 반대로 컬러). 나는 JQuery에서 토글을 사용하는 것에 대해 생각했지만 5 번 코드를 복제하지 않고 5 개의 이미지를 만들 수 있는지 확신하지 못했습니다.

내 생각은 정규식을 사용하여 클릭 한 이미지의 파일 이름에 'true'또는 'false'를 캡처하고 대체 이미지로 바꾸는 함수를 만드는 것이 었습니다.

달성에 대한 귀하의 생각은 무엇입니까? 가능하다면 PHP에서이 작업을 수행하고 싶습니다.하지만 JavaScript/JQuery가 아닌 경우 수행하십시오. 어떤 도움을 주셔서 감사합니다! 궁금한 점이 있으면 알려주세요.

Answer 1

filename = filename.replace('_true','_false'); 

는 둘 jQuery를도

<img src="FileName_true.png" 
onclick="this.src=(this.src.indexOf('_true')!=-1)?this.src.replace('true','false'):this.src.replace('false','true')" /> 

필요 정규 표현식은 내가 PHP에서이 일반 어리석은 것이다하려면이 늦은 시간

에 가지고 올 수 있으며, 쿠키를 필요는 무엇입니까

Answer 2

mplungjan의 답변은 훌륭하지만 몇 가지 대안을 제안하겠습니다. 이미지 스왑은 sprite을 사용하는 것이 가장 좋으므로 이미지간에 전환이 지연되지 않습니다. 두 버전의 이미지를 하나의 파일에 나란히 놓습니다. 해당 이미지를 div의 배경으로 설정하고 배경 위치를 조정하여 하나 또는 다른 이미지를 표시하십시오.

"pic1_bw_color_sprite.png"이 75x75 컬러 이미지이고 그 아래에 75x75 이미지가 있고 최종 이미지가 75px 너비와 150px 높이라고 가정합니다. 이 같은 설정하여 CSS :

$("#pic1").click(function() 
{ 
    $(this).toggleClass("bw"); 
}); 

여기를보십시오 :

#pic1 
{ 
    background-image: url(pic1_bw_color_sprite.png); 
    height: 75px; 
    width: 75px; 
} 
#pic1.bw 
{ 
    background-position: 0px -75px; 
} 

그런 다음 몇 가지 간단한 jQuery를이 모든 작업을 할 http://jsfiddle.net/gilly3/B7esz/

을 지금까지의 코드를 복제 등을, 그 하나 jQuery가 피하는 것이 매우 좋다. 그냥 행동해야하는 모든 클래스가 포함 된 선택 사용 : 당신이 당신의 데이터베이스를 업데이트 할 수 있도록

$("#pic1,#pic2,#pic3,#pic4").click(...); 
// or 
$(".bwSwap").click(...); 

당신이 당신의 폼 요소에 대한 참조를 얻을 필요가 양식의 현재 상태를 저장하기를, 다음 설정 value 속성 (또는 jQuery의 경우 .val()).

$("#pic1").click(function() 
{ 
    $(this).toggleClass("bw"); 
    $("#pic1isBW").val($(this).hasClass("bw")); 
});