Jquery를 사용하는 라디오 버튼 이미지

Question

jQuery로 라디오 버튼의 스타일을 지정했으며, 모든 라디오 버튼을 고유 한 이미지와 클릭 이미지로 만들고 싶습니다. 하지만 지금은 보편적으로 두 이미지 만 사용하고 있습니다.

코드는 jsFiddle에서 볼 수 있습니다.

는 지금 난 그냥 그 이미지의

var checkedImgUrl = 'http://b.vimeocdn.com/ps/879/87952_300.jpg', 
    uncheckedImgUrl = 'http://www.mediabistro.com/alltwitter/files/2011/03/twitter_block.gif'; 

가 어떻게 할 수 각각 자신의 독특한 이미지를 가지고 이미지를 클릭 있나요? 당신의 jQuery 코드에서 다음

<input name="version" type="radio" value="ATT" data-imageurl="radioimage1" /> 

, 당신은이 같은 이미지 URL을 참조 할 수 있습니다 :이 작업을 수행 할 수 있습니다

Answer 1

한 가지 방법은, 예를 들어, 이미지 URL을 보유하여 라디오 버튼에 속성을 추가하는 것입니다

uncheckedImgUrl = $(this).attr("data-imageurl") + '.jpg'; 

이미지를 직접 호스팅하는 경우 파일 끝에 '-on'과 같은 'selected'버전의 파일을 저장할 수 있습니다. 그래서 같이 : 내가 예를 들어 이미지를 만들 너무 게으른이기 때문에 http://jsfiddle.net/dGWJp/30/

가 난 그냥 jsfiddle에 작은 변화를 만들어 :

checkedImgUrl = uncheckedImgUrl + '-on.jpg'; 

희망이

가 편집 할 수 있습니다. 이 jsfiddle는 'checked'이미지 만 사용자 정의 이미지로 변경합니다. 이 단계를 확장하여 쿼리를 완료하는 데 충분한 정보가 있어야합니다.

checkedImgUrl = $(radio).attr("data-imageurl");