Question

鉴于此无序列表：

<ul>
  <li><input type="radio" name="radio" id="product1" value="product1" checked="checked"><label for="product1"><span>Product 1</span></label></li>
  <li><input type="radio" name="radio" id="product2" value="product2"><label for="product2"><span>Product 2 [+ 10 $]</span></label></li>
  <li><input type="radio" name="radio" id="product3" value="product3"><label for="product3"><span>Product 3 [+ 20 $]</span></label></li>
</ul>

现在额外的价格应该是相对的。当您选择第二个单选按钮时，产品3的附加价格应为＆＃34; [+ 10 $]＆＃34; （20美元到10美元之间的差额）。＆＃34;额外＆＃34;产品1的价格应为＆＃34; [ - 10 $]＆＃34; （0 $和10 $之间的差异）。

因此，在选择第二个单选按钮后，列表应该如下所示：

<ul>
  <li><input type="radio" name="radio" id="product1" value="product1" checked="checked"><label for="product1"><span>Product 1 [- 10 $]</span></label></li>
  <li><input type="radio" name="radio" id="product2" value="product2"><label for="product2"><span>Product 2</span></label></li>
  <li><input type="radio" name="radio" id="product3" value="product3"><label for="product3"><span>Product 3 [+ 10 $]</span></label></li>
</ul>

如何使用jQuery实现这一目标？

Answer 1

请参阅我的jsfiddle以获得解决方案：

http://jsfiddle.net/3m580heq/11/

我添加了data-price属性来保存产品的价格

 <ul class="price-list">
      <li>
          <input type="radio" name="radio" id="product1" data-price="100" value="product1" checked="checked">
          <label for="product1"><span>Product 1</span></label>
      </li>
      <li><input type="radio" name="radio" id="product2" data-price="110" value="product2"><label for="product2"><span>Product 2 [+ 10 $]</span></label></li>
      <li><input type="radio" name="radio" id="product3" data-price="120" value="product3"><label for="product3"><span>Product 3 [+ 20 $]</span></label></li>
    </ul>


$(function() {
    $('.price-list input[type=radio]').change(function() {
        var _radioObj = $(this);
        var _currentPrice = _radioObj.attr('data-price'); // or .data('price');

        $.each(_radioObj.closest('ul.price-list').find('input[type=radio]'), function() {
            var _span = $(this).parent('li').find('span');
            var _count = parseFloat($(this).attr('data-price')) - parseFloat(_currentPrice);
            _count = _count > 0 ? '+ ' + _count : _count.toString().replace('-', '- ');
            var _newContent;

            if(_count == 0)
        {
            if(_span.html().indexOf('[') > 0)
                _span.html(_span.html().substring(0, _span.html().indexOf('[') - 1));           
           else
               _span.html(_span.html());  
        } else {
            if(_span.html().indexOf('[') > 0)
                _span.html(_span.html().substring(0, _span.html().indexOf('[') - 1) + ' [' + _count + ' $]');            
           else
               _span.html(_span.html() + ' [' + _count + ' $]');       
        }
        });
    });
});

jQuery：在单选按钮列表中操作价格

1 个答案: