javascript - 选择该选项后更改数据

Question

我有以下定价计划，并且我已经尝试更改列表项 <li>Gain 20 Likes</li> 的数据。当选择适当的选项时。例如，当选择选项 <option value="10.00">15 .......$10.00</option> 时我希望列表项显示 <li>Gain 15 Likes</li> ，选择 <option value="15.00">30 .......$15.00</option> 时显示<li>Gain 30 Likes</li>等等。不幸的是，我的javascript知识太贫乏，无法解决这个问题。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-md-6 compare-col"><!-- t#4-starts -->
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Plan</h3>
            </div>
            <div class="panel-body">
                <div class="the-price">
                    <div class="form-group" style="margin-bottom:13px;">
                        <select class="form-control" id="followersPlans" name="followersPlans">
                            <option value="10.00">15 .......$10.00</option>
                            <option value="15.00">30 .......$15.00</option>
                            <option value="30.00">50 .......$30.00</option>
                            <option value="60.00">100 .....$60.00</option>
                            <option value="100.00">200 .....$100.00</option>
                            <option value="140.00">300 .....$140.00</option>
                            <option value="220.00">500 .....$220.00</option>
                            <option value="420.00">1000 ...$420.00</option>
                        </select>
                    </div>
                    <p class="mini">Monthly Subscription</p>
                    <a href="#" class="btn btn-block btn-success" role="button">Activate</a>                
                </div>
                <ul class="pricing__list">
                    <li>No Survey Required</li>
                    <li>Gain 20 Likes</li>
                </ul>
            </div>
        </div>
    </div><!-- t#4-ends -->

Answer 1

由于您希望将您的 $ 金额存储在选项项的 value 属性上，因此您可能需要使用 data-attributes 来存储相似的数字。

以下是如何使用 jQuery 执行此操作:

$(document).ready(function() {
  $('#followersPlans').on('change', function() {
    // console.log($(this).find('option:selected').data('likes'));
    var likes = $(this).find('option:selected').data('likes');
    $('.updateLikes').html('Gain ' + likes + ' Likes');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-md-6 compare-col">
  <!-- t#4-starts -->
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">Plan</h3>
    </div>
    <div class="panel-body">
      <div class="the-price">
        <div class="form-group" style="margin-bottom:13px;">
          <select class="form-control" id="followersPlans" name="followersPlans">
            <option value="10.00" data-likes="15">15 .......$10.00</option>
            <option value="15.00" data-likes="30">30 .......$15.00</option>
            <option value="30.00" data-likes="50">50 .......$30.00</option>
            <option value="60.00" data-likes="100">100 .....$60.00</option>
            <option value="100.00" data-likes="200">200 .....$100.00</option>
            <option value="140.00" data-likes="300">300 .....$140.00</option>
            <option value="220.00" data-likes="500">500 .....$220.00</option>
            <option value="420.00" data-likes="1000">1000 ...$420.00</option>
          </select>
        </div>
        <p class="mini">Monthly Subscription</p>
        <a href="#" class="btn btn-block btn-success" role="button">Activate</a>
      </div>
      <ul class="pricing__list">
        <li>No Survey Required</li>
        <li class='updateLikes'>Gain 20 Likes</li>
      </ul>
    </div>
  </div>
</div>
<!-- t#4-ends -->