使用jQuery刷新跨度值并在警报中显示

Question

我有三个选项的下拉菜单： soft ， medium和hard 。 onchange我显示的价格span 。 当用户选择soft价格为1000 ， medium价格为1500 ，而hard为2000 。

问题是我的alert()在刷新span之前执行，但是我想在刷新价格后显示alert 。 我怎样才能做到这一点？

<span class="amount"><i class="fa fa-inr"></i>0</span>

$('.support-layer-firmness').on('change', function (e) {
   // onchange I am getting old value, if i select soft i am getting 0 instead of 1000
   var price = $('span.amount').text();
   alert(price);
});

HTML

<li class="tmcp-field-wrap">
       <label for="tmcp_select_1"></label>
            <select class="tmcp-field support-layer-firmness tm-epo-field tmcp-select tm-valid" name="tmcp_select_0">
                         <option value="Select Firmness_0" class="tc-multiple-option tc-select-option"  data-price="">Select Firmness</option>
                         <option value="Soft_1" class="tc-multiple-option tc-select-option" data-price="1000">Soft</option>
                         <option value="Medium_2" class="tc-multiple-option tc-select-option" data-price="1500">Medium</option>
                         <option value="Hard_3" class="tc-multiple-option tc-select-option"  data-price="2000">Hard</option>    
             </select>
<span class="price tc-price  hidden">
     <span class="amount"><i class="fa fa-inr"></i>1,000</span>
 </span>

Answer 1

不带参数的jQuery.text方法将返回textContent ，如果设置了参数，则将设置textContent ！

在您的示例中，您永远不会设置textContent ，使用jQuery.data获取data-price值，然后使用jQuery.text(VALUE)设置textContent 。

 $('.support-layer-firmness').on('change', function(e) { var price = $(this).find('option:selected').data('price') $('span.amount').text(price); alert(price); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <li class="tmcp-field-wrap"> <label for="tmcp_select_1"></label> <select class="tmcp-field support-layer-firmness tm-epo-field tmcp-select tm-valid" name="tmcp_select_0"> <option value="Select Firmness_0" class="tc-multiple-option tc-select-option" data-price="">Select Firmness</option> <option value="Soft_1" class="tc-multiple-option tc-select-option" data-price="1000">Soft</option> <option value="Medium_2" class="tc-multiple-option tc-select-option" data-price="1500">Medium</option> <option value="Hard_3" class="tc-multiple-option tc-select-option" data-price="2000">Hard</option> </select> <span class="price tc-price hidden"> <span class="amount"><i class="fa fa-inr"></i>1,000</span> </span> </li> 

Answer 2

这条路：

 $('.support-layer-firmness').on('change', function (e) { // onchange I am getting old value, if i select soft i am getting 0 instead of 1000 alert($('.support-layer-firmness option:selected').attr('data-price')); $('span.amount').text($('.support-layer-firmness option:selected').attr('data-price')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="tmcp-field-wrap"> <label for="tmcp_select_1"></label> <select class="tmcp-field support-layer-firmness tm-epo-field tmcp-select tm-valid" name="tmcp_select_0"> <option value="Select Firmness_0" class="tc-multiple-option tc-select-option" data-price="">Select Firmness</option> <option value="soft" class="tc-multiple-option tc-select-option" data-price="1000">Soft</option> <option value="medium" class="tc-multiple-option tc-select-option" data-price="1500">Medium</option> <option value="hard" class="tc-multiple-option tc-select-option" data-price="2000">Hard</option> </select> <span class="price tc-price hidden"> <span class="amount"><i class="fa fa-inr"></i>1,000</span> </span> 

Answer 3

这是你的jsfiddle-> jsfiddle

 $('.support-layer-firmness').on('change', function (e) {
   var value=$(this).find(':selected').attr('data-price');
   $('span.amount').text(value);
   alert(value);
 });

Answer 4

尝试这个 ：

 $(document).ready(function() { $('.support-layer-firmness').on('change', function (e) { $('span.amount').hide(10); var price = $("option:selected").attr("data-price"); $('span.amount').text(price); $('span.amount').show(1000,function(){ alert(price); }) }) }) 

 <li class="tmcp-field-wrap"> <label for="tmcp_select_1"></label> <select class="tmcp-field support-layer-firmness tm-epo-field tmcp-select tm-valid" name="tmcp_select_0"> <option value="Select Firmness_0" class="tc-multiple-option tc-select-option" data-price="">Select Firmness</option> <option value="Soft_1" class="tc-multiple-option tc-select-option" data-price="1000">Soft</option> <option value="Medium_2" class="tc-multiple-option tc-select-option" data-price="1500">Medium</option> <option value="Hard_3" class="tc-multiple-option tc-select-option" data-price="2000">Hard</option> </select> <span class="price tc-price hidden"> <span class="amount"><i class="fa fa-inr">1000</i></span> </span> </li> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>