javascript - 选择不同单选按钮时如何更改段落内容

Question

选择不同单选按钮时如何更改

段落

的内容？欢迎使用 Jquery!

我在下面附上我当前的代码和 jSFiddle。我想更改 .mstotal 内的段落。如有必要，您可以将其更改为 ID。

HTML

    <label class="ms_price">1.99<span>/year</span><input name="membership-type" type="radio" value="1"/></label>
    <label class="ms_price">2.50<span>/year</span><input name="membership-type" type="radio" value="2"/></label>
    <label class="ms_price">3.00<span>/year</span><input name="membership-type" type="radio" value="3"/></label>
    <label class="ms_price">4.99<span>/year</span><input name="membership-type" type="radio" value="4"/></label>



    <div class="ms_total">
      <p>Membership A - 1 Year:<span>$1.99</span></p>
    </div>

JavaScript

    $(document).ready(function(){
        $("input[name='membership-type']").live("change", function(){
            if ($(this).val() == "1") {
                 $(".ms_total").text("<p>Membership A - 1 Year:<span>$1.99</span></p>");                  
            } else if ($(this).val() == "2") {
                 $(".ms_total").text("<p>Membership B - 1 Year:<span>$2.50</span></p>");                  
            } else if ($(this).val() == "3") {
                 $(".ms_total").text("<p>Membership C - 1 Year:<span>$3.00</span></p>");                  
            } else if ($(this).val() == "4") {
                 $(".ms_total").text("<p>Membership D - 1 Year:<span>$4.99</span></p>");                  
            }
        }); 
    });

http://jsfiddle.net/vinicius5581/8wn27zej/

Answer 1

您正在使用.live()注册事件处理程序 removed in jQuery 1.9 ，所以使用.on() 。还可以使用 .html()设置html内容。

$(document).ready(function(){
    $("input[name='membership-type']").on("change", function(){
        if ($(this).val() == "1") {
            $(".ms_total").html("<p>Membership A - 1 Year:<span>$1.99</span></p>");                  
        } else if ($(this).val() == "2") {
            $(".ms_total").html("<p>Membership B - 1 Year:<span>$2.50</span></p>");                  
        } else if ($(this).val() == "3") {
            $(".ms_total").html("<p>Membership C - 1 Year:<span>$3.00</span></p>");                  
        } else if ($(this).val() == "4") {
            $(".ms_total").html("<p>Membership D - 1 Year:<span>$4.99</span></p>");                  
        }
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="ms_price">1.99<span>/year</span><input name="membership-type" type="radio" value="1"/></label>
<label class="ms_price">2.50<span>/year</span><input name="membership-type" type="radio" value="2"/></label>
<label class="ms_price">3.00<span>/year</span><input name="membership-type" type="radio" value="3"/></label>
<label class="ms_price">4.99<span>/year</span><input name="membership-type" type="radio" value="4"/></label>



<div class="ms_total">
  <p>Membership A - 1 Year:<span>$1.99</span></p>
</div>

<小时/>

如果您想使用event delegation ，使用 .on(event, selector, handler) 格式，例如

$(document).ready(function () {
    $(document).on('change', "input[name='membership-type']", function () {
        if ($(this).val() == "1") {
            $(".ms_total").html("<p>Membership A - 1 Year:<span>$1.99</span></p>");
        } else if ($(this).val() == "2") {
            $(".ms_total").html("<p>Membership B - 1 Year:<span>$2.50</span></p>");
        } else if ($(this).val() == "3") {
            $(".ms_total").html("<p>Membership C - 1 Year:<span>$3.00</span></p>");
        } else if ($(this).val() == "4") {
            $(".ms_total").html("<p>Membership D - 1 Year:<span>$4.99</span></p>");
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="ms_price">1.99<span>/year</span>
    <input name="membership-type" type="radio" value="1" />
</label>
<label class="ms_price">2.50<span>/year</span>
    <input name="membership-type" type="radio" value="2" />
</label>
<label class="ms_price">3.00<span>/year</span>
    <input name="membership-type" type="radio" value="3" />
</label>
<label class="ms_price">4.99<span>/year</span>
    <input name="membership-type" type="radio" value="4" />
</label>
<div class="ms_total">
    <p>Membership A - 1 Year:<span>$1.99</span>
    </p>
</div>

1 : http://api.jquery.com/live/