jquery를 사용하여 onSelect() 업데이트하기

Question

사용자가 클릭하는 3 개의 라디오 버튼 중 어떤 것을 기반으로 변경하고 싶은 HTML 코드가 있습니다.

<input type="radio" name="awardSwitch" value="silver" /> 
<input type="radio" name="awardSwitch" value="gold" /> 
<input type="radio" name="awardSwitch" value="platinum" /> 

내가 업데이트 할 HTML은 다음과 같습니다 : 여기

이 라디오 버튼입니다 나는 기본적으로 변경할 것을

<div id="BestCourseforyourGolfGame"> 
    <div class="floatleft"> 
    <textarea name="code" cols="50" rows="6"> 
    <a href="http://foo.com/best/best-of/#BestCourseforyourGolfGame" target="_blank"> 
    <img src="http://foo.com/assets/awards/2010/best-of-2010-silver.jpg" alt="Best Course for your Golf Game" border="0" width="151" height="200" /></a> 
    </textarea> 
    </div> 
    <div class="floatright"> 
    <img src="http://foo.com/assets/awards/2010/best-of-2010-silver.jpg" alt="Best Course for your Golf Game" border="0" width="151" height="200" /> 
    </div> 
</div> 

는 HTML의 현명한 텍스트, 마지막 비트입니다 이미지 이름의 이 예에서는 "-silver"이지만 선택된 라디오 버튼에 따라 "-gold"또는 "-platinum"으로 업데이트하고 싶습니다.

미리 감사드립니다.

Answer 1

당신은 jQuery를 지정을, 그래서 여기에 주소 코드는 textarea 및 디스플레이 div :

jQuery(document).ready(function(){ 
    jQuery('input[name=awardSwitch]:radio').click(function(){ 
     var newsrc = 'http://foo.com/assets/awards/2010/best-of-2010-'+jQuery(this).val()+'.jpg' 
     var newhtml = '<a href="http://foo.com/best/best-of/#BestCourseforyourGolfGame" target="_blank">'; 
     newhtml += '<img src="'+newsrc+'.jpg"'; 
     newhtml += ' alt="Best Course for your Golf Game" border="0" width="151" height="200" /></a>'; 
     jQuery('#BestCourseforyourGolfGame textarea[name="code"]').val(newhtml); 
     jQuery('#BestCourseforyourGolfGame .floatright img').attr('src', newsrc); 
    }); 
}); 

Answer 2

jQuery을 사용한다고 가정합니다.

$("[name='awardSwitch']").click(function(){ 
    var active_value = $(this).val(); 

    // replace the img src 
    $("#BestCourseforyourGolfGame img").each(function(){ 
    var src = $(this).attr("src"); 
    src = src.substr(0, src.lastIndexOf("-")+1); 
    $(this).attr("src", src + active_value + ".jpg"); 
    }); 

}); 

-Knuth

Answer 3

이 같은 시도 "나는 그것을 테스트하지 않았다, 나는 단지 그것을 잘 증명"

$(function() { 
    $("[name=awardSwitch]").change(function() { 
     var txtArea = $("[name=code]"); 
     var txtVal = txtArea.val(); 
     var prevTag = txtArea.data("prevTag"); 
     if (!prevTag || prevTag.length < 1) { 
      prevTag = "silver" 
     } 
     var imgVal = $(this).val(); 
     txtVal = txtVal.replace(prevTag+".jpg", imgVal+".jpg") 
     txtArea.val(txtVal); 
     txtArea.data("prevTag", imgVal); 
    }); 
});