JQuery: Манипулирование цены в списке радио кнопки

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 должна быть «[+ 10 $]» (разница между 20 и 10 $). «Дополнительная» цена Продукта 1 должна быть «[- 10 $]» (разница между 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 + ' $]');  
     } 
     }); 
    }); 
});