使用 jquery 更新 onSelect()答案

【问题标题】：Using jquery to update onSelect()使用 jquery 更新 onSelect()
【发布时间】：2011-06-18 19:48:19
【问题描述】：

我有一些 HTML 代码，我想根据用户单击的 3 个单选按钮中的哪一个来更改。

这里是单选按钮：

<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”。

提前致谢！

【问题讨论】：

标签： jquery radio-button onchange

【解决方案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);
    });
});

【讨论】：

【解决方案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

【讨论】：

【解决方案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);
    });
});

【讨论】：