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); 
    }); 
});