如何使用Ractive计算多个无线电的总价值
[英]How do I calculate total value of multiple radio using ractive
问题描述
我在ractive.js循环中生成了多个问题。 每个问题都有价格不同的多个答案。 我需要计算总价格，并在每次选择的答案更改时重新计算。 需要帮助。
我制作了这个Codepen： http ://codepen.io/Nitoiti/pen/GjxXvo
<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>
1 个解决方案
解决方案1
0 2016-10-20 11:39:03
好吧，我自己找到了解决方案。
<!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>
如何通过使用 PHP 和 Javascript 获取单选按钮值来计算总数？
[英]How to calculate a total by taking the radio button values using PHP and Javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.