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内容。

＆＃13;

$(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>");                  
        }
    }); 
});

＆＃13;

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

＆＃13;

如果您想使用event delegation，请使用{/ 1}}格式，如

＆＃13;

.on(event, selector, handler)

＆＃13;

$(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>");
        }
    });
});

＆＃13;

＆＃13; 1：http://api.jquery.com/live/

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

1 个答案: