ractiveを使用して複数のラジオの合計値を計算するには

ractive.jsループ内に複数の質問が生成されています。それぞれの質問には、異なる価格で複数の回答があります。私は合計価格を計算し、選択された回答が変わるたびにそれを再計算する必要があります。これで助けが必要です。 http://codepen.io/Nitoiti/pen/GjxXvo ractiveを使用して複数のラジオの合計値を計算するには

<h1>Get total price</h1> 
 
<div id='container'></div> 
 

 
    <script id='template' type='text/ractive'> 
 

 
    {{#each designQuestions}} 
 
    <p><span>{{id}} </span> {{question}}</p> 
 
     {{#each answers}} 
 
     <label><input type='radio' name='designQuestions-answers-{{id}}' value='{{price}}' {{#if selected}} checked {{/if}} >{{answer}} - {{price}}</label> 
 
     {{/each}} 
 
    {{/each}} 
 
    
 
        
 
    <table class="total"> 
 
     <tr> 
 
      <td>total price:</td> 
 
      <td>{{total}}</td> <!-- how to calculate total price and change it on radio buttons change? --> 
 
     </tr> 
 
    </table>     
 
    </script> 
 

 
<script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script> 
 

 
<script> 
 
     
 
    var ractive, designQuestions; 
 
     
 
    designQuestions = [ 
 
     { id: '1', 
 
      question: 'Question1 ?', 
 
      answers: [ 
 
       {answer:'answer1',price:'222', selected: 'selected'}, 
 
       {answer:'answer2',price:'553'}, 
 
       {answer:'answer3',price:'22'}, 
 
       {answer:'answer4',price:'442'} 
 
      ] 
 
     }, 
 
     { id: '2', 
 
      question: 'Question2 ?', 
 
      answers: [ 
 
       {answer:'answer1',price:'22'}, 
 
       {answer:'answer2',price:'55', selected: 'selected'}, 
 
       {answer:'answer3',price:'0'}, 
 
       {answer:'answer4',price:'44'} 
 
      ] 
 
     } 
 
     
 
     ]; 
 
    
 
    
 
    
 
    var ractive = new Ractive({ 
 
     // The `el` option can be a node, an ID, or a CSS selector. 
 
     el: '#container', 
 

 
     // We could pass in a string, but for the sake of convenience 
 
     // we're passing the ID of the <script> tag above. 
 
     template: '#template', 
 

 
     // Here, we're passing in some initial data 
 

 
     data: { 
 
      designQuestions: designQuestions 
 
     } 
 
     
 
     
 
    }); 
 
    </script>

出典

2016-10-10 Eugene Musijenko

まあ」私が見つけた解決策自分自身：

私はこのcodepenを作りました。

<!doctype html> 
 
<html> 
 
<head> 
 
    <meta charset='utf-8'> 
 
    <title>Ractive test</title> 
 
</head> 
 

 
<body> 
 
    <h1>Калькулятор</h1> 
 

 
    <!-- 
 
     1. This is the element we'll render our Ractive to. 
 
    --> 
 
    <div id='container'></div> 
 

 
    <!-- 
 
     2. You can load a template in many ways. For convenience, we'll include it in 
 
     a script tag so that we don't need to mess around with AJAX or multiline strings. 
 
     Note that we've set the type attribute to 'text/ractive' - though it can be 
 
     just about anything except 'text/javascript' 
 
    --> 
 
    <script id='template' type='text/ractive'> 
 

 
    {{#each designQuestions}} 
 
    <p><span>{{id}} </span> {{question}}</p> 
 
     {{#each answers}} 
 
      <label><input on-change='calc' type='radio' name='{{select}}' value='{{selected}}' >{{answer}} - {{price}}</label> 
 
     {{/each}} 
 
    {{/each}} 
 
         
 
    <table class="total"> 
 
     <tr> 
 
      <td>Итого:</td> 
 
      <td>{{sum}}</td> 
 
     </tr> 
 
    </table>     
 
    </script> 
 

 
    <script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script> 
 

 
    <script> 
 
     
 
    var ractive, designQuestions; 
 
     
 
    designQuestions = [ 
 
     { id: '1', 
 
      question: 'Какой дизайн вы предпочитаете?', 
 
      answers: [ 
 
       {answer:'уникальный и лично свой',price:222,selected:1}, 
 
       {answer:'у меня уже есть готовый дизайн',price:553,selected:2}, 
 
       {answer:'дизайн не нужен',price:22,selected:3}, 
 
       {answer:'купим тему на themeforest',price:442,selected:4} 
 
      ], 
 
      select:1 
 
     }, 
 
     { id: '2', 
 
      question: 'есть ли у вас наработки по дизайну?', 
 
      answers: [ 
 
       {answer:'да, есть',price:22,selected:0}, 
 
       {answer:'нет, ничего нет',price:55,selected:1}, 
 
       {answer:'дизайн не нужен',price:0,selected:2}, 
 
       {answer:'еще крутой ответ',price:44,selected:3} 
 
      ], 
 
      select:1 
 
     } 
 
     
 
     ]; 
 
     
 
    
 
    var ractive = new Ractive({ 
 
     // The `el` option can be a node, an ID, or a CSS selector. 
 
     el: '#container', 
 

 
     // We could pass in a string, but for the sake of convenience 
 
     // we're passing the ID of the <script> tag above. 
 
     template: '#template', 
 

 
     // Here, we're passing in some initial data 
 

 
     data: { 
 
      designQuestions: designQuestions, 
 
      sum:0 
 
     }, 
 
     onrender:function(options) 
 
     { 
 
      var self = this; 
 
      // proxy event handlers 
 
      self.on(
 
      { 
 
       calc: function (e) 
 
       { 
 
        calc(); 
 
       } 
 
      }); 
 

 
      calc(); 
 

 
      function calc() 
 
      { 
 
       var arrayLength = designQuestions.length; 
 
       sum = 0; 
 
       for (var i = 0; i < arrayLength; i++) 
 
       { 
 
        var lengthans = designQuestions[i].answers.length; 
 
        for (var j = 0; j < lengthans; j++) { 
 
         if (designQuestions[i].answers[j].selected === designQuestions[i].select){ 
 
          sum = sum + designQuestions[i].answers[j].price; 
 
         } 
 
        } 
 
       } 
 
       self.set('sum',sum); 
 
      } 
 
     } 
 
    }); 
 
    </script> 
 
</body> 
 
</html>

出典

2016-10-20 11:39:03

ractiveを使用して複数のラジオの合計値を計算するには

答えて

関連する問題