Question

我有一些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”。

提前致谢！

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

使用jquery更新onSelect（）

3 个答案: