根据用户选择的值，将20个不同的静态值乘以12，并在之后显示总计

Question

这个想法是（请看下面的图片），我尝试显示一个标签（图像的右下角），其中包含客户选择的服务的总年数。 如您所见，您可能会更好地理解我想说的话 。

在这2列中，我为客户提供2种不同的服务，例如在第2列中，当客户选择2个许可证（橙色条/灰色条）时，他可以在下面看到这2个许可证的总数（每月）。 我想将该总数乘以* 12（得出总数/年）在不同的标签中，我想对1到20之间的每个数字使用相同的想法。

首先，我想使用total / month的ID（这是一个动态值）并将其乘以12来获得total / year ，但是我没有成功实现它。 因此，我想尝试一些更静态的方法，并针对每种情况在1-20之间设置一个条件。

例如：10 $ = 1个许可证，客户端选择5个许可证，因此总计为50 $ /月，我想将此值乘以12后再显示。

如果用户选择1到20之间的任意数量的许可证，这将是一个更静态的想法，我希望为每种可能性提供一个IF条件，即当用户单击4时，在一个窗口中显示每月价格乘以12不同的标签。

这些ID可能会对您有所帮助，而我尝试使其工作的jQuery代码部分也可以为您提供帮助。

 <span id="annuelPricesTotal">Total : </span> 

总计/年的ID（在img的右下角）

<span value="text" class="priceAnnuel" id="annual-standard-total-price">Total :</span> 

总计/月的ID

  var theBeforeTotal = 0;
  var priceTotalAnnual = (14.90 + (9.90 * 11)).toFixed(2).replace(".", ".") + '€HT/Annuel';
  $('#standardSliderAnnual').click(function () {
    // console.log($(this).val(priceTotalAnnual));
    theBeforeTotal = Number($(this).val(priceTotalAnnual));
    $('#annuelPricesTotal').html("Total: " + theBeforeTotal);
  });
  $('#annuelPricesTotal').html("Total: " + theBeforeTotal); 

我尝试过的jQuery（我尝试实现以下想法）是，当用户首次访问该页面时，“总计/年”按钮的内部应显示0，而在用户单击列后，它应该显示合计/年，我知道计算总数/年的功能不好。

  <input id="standardSliderAnnual" type="range" name="foo" min="1" max="20">

用户将使用输入ID来选择所需的许可证数量（1-20）。

Answer 1

为了简化问题，您可以计算基本费用（第一用户费用-第二用户费用）加上每位用户的费用，第一位用户也是如此。 HTML5将data-属性指定为有效的自定义属性。 因此我们可以将这些数据保存为HTML。

的input事件在的值后立即触发<input>元件发生了变化，在opposit到change所述输入完成时仅触发事件（例如失去改变值后焦点）。

为了提高性能，我们将事件侦听器定义为可以访问预先查询的集合和预先准备的DOM数据的闭包。

 $(()=> { let $annualTotal = $('#annual-total'), totalFees = [0,0,0] ; function currencyFormat(value) { return value.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }); } function calcAnnualTotal() { $annualTotal.html(currencyFormat(12 * totalFees.reduce(function(sum, current) { return sum+current; }, 0))); } $('#licenses>div.licence').each(function(idx, div) { let $slider = $(div).find('input.standardSliderAnnual'), $total = $(div).find('.total') , baseFee = parseFloat($(div).attr('data-base-fee')) , perUser = parseFloat($(div).attr('data-per-user')) , onInput = function() { totalFees[idx] = parseInt($slider.val()) * perUser + baseFee; $total.html(currencyFormat(totalFees[idx])); calcAnnualTotal(); } ; $slider.on('input', onInput); onInput(); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="licenses"> <div class="licence" data-base-fee="0" data-per-user="2.99"> <h2>License 1</h2> <input class="standardSliderAnnual" type="range" name="foo" min="1" max="20" value="1"> <div> <span>Total: </span><span class="total">0,00 €</span><span>HT</span> </div> </div> <div class="licence" data-base-fee="5" data-per-user="9.9"> <h2>License 2</h2> <input class="standardSliderAnnual" type="range" name="foo" min="1" max="20" value="1"> <div> <span>Total: </span><span class="total">0,00 €</span><span>HT</span> </div> </div> <div class="licence" data-base-fee="10" data-per-user="14.9"> <h2>License 3</h2> <input class="standardSliderAnnual" type="range" name="foo" min="1" max="20" value="1"> <div> <span>Total:</span> <span class="total">0,00 €</span><span>HT</span> </div> </div> <div> <h2>Annual Total</h2> <div> <span id="annual-total">0,00</span><span>HT</span> </div> </div> </div> 

Answer 2

这是一个基于您的布局的示例片段示例。

JSFiddle： https ：//jsfiddle.net/Tiregan/Lub8jg74/2/

 init(); function init() { service = 0; users = 0; selectService(0); addListenersServices(); addListenersSliders(); } function recount(serviceNumber) { if (serviceNumber === '0') { ; } else if (serviceNumber === '1') { users = $('#range-option-1').val(); var totalPrice = parseFloat(Math.round((2.99 + users * 2.99) * 100) / 100).toFixed(2); $('#total-monthly-1').text(totalPrice); } else if (serviceNumber === '2') { users = $('#range-option-2').val(); var totalPrice = parseFloat(Math.round((14.90 + users * 9.90) * 100) / 100).toFixed(2); $('#total-monthly-2').text(totalPrice); } else if (serviceNumber === '3') { users = $('#range-option-3').val(); var totalPrice = parseFloat(Math.round((24.90 + users * 14.90) * 100) / 100).toFixed(2); $('#total-monthly-3').text(totalPrice); } } function selectService(serviceNumber) { $('.option-main').removeClass('selected'); $('#main-' + serviceNumber).addClass('selected'); } function addListenersServices() { $('.service').click(function(){ var serviceNumber = this.id.replace('service-', ''); service = serviceNumber; selectService(serviceNumber); recount(serviceNumber); }); } function addListenersSliders() { $('.slider').on('input', function() { sliderNumber = this.id.replace('range-option-', ''); if (sliderNumber === service) { recount(service); } }); } 

 .option-main { float: left; box-sizing: border-box; display: inline-block; background-color: #E7E7E7; border: 1px #999 solid; border-radius: 0.5vw; margin: 0 0.4vw 0 0.4vw; min-width: 13vw; width: 13vw; min-height: 16vw; height: 16vw; } .option-main a { text-decoration: none; } .main-up { box-sizing: border-box; border-bottom: 1px grey dashed; height: 70%; padding-top: 4vw; text-align: center; font: bold 2.3vw "Arial"; color: darkred; } .main-down { box-sizing: border-box; background-color: silver; height: 30%; padding-top: 0.8vw; text-align: center; font: bold 1vw "Arial"; color: dimgray; } .option-secondary { float: left; box-sizing: border-box; display: inline-block; background-color: #E7E7E7; padding: 0 0 0 0; border: 1px #999 solid; border-radius: 0.5vw; margin: 0 0.4vw 0 0.4vw; min-width: 13vw; width: 13vw; min-height: 10vw; height: 10vw; text-decoration: none; text-align: center; font: bold 1.3vw "Arial"; color: #444; } .secondary-table { display: table; height: 100%; width: 100%; } .secondary-cell { display: table-cell; text-align: center; vertical-align: middle; } .row { box-sizing: border-box; padding-top: 1vh; width: 70vw; clear: both; } .slider { -webkit-appearance: none; margin-top: 1vw; width: 80%; height: 0.4vw; cursor: pointer; z-index: 1000; } .slider::-moz-range-progress { background-color: orange; } .slider::-webkit-slider-runnable-track { -webkit-appearance: none; width: 100%; height: 8.4px; cursor: pointer; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background: #3071a9; border-radius: 1.3px; border: 0.2px solid #010101; } .slider::-webkit-slider-thumb { -webkit-appearance: none; border: 1px solid #000000; border-radius: 0.5vw; height: 1vw; width: 1vw; background: #ffffff; cursor: pointer; margin-top: -0.3vw; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background-color: orange; } .slider::-ms-fill-lower { background-color: orange; cursor: pointer; width: 100%: } .span-font-normal { font-weight: normal; } .selected { border: 3px solid orange; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="content"> <div class="row"> <a id="service-0" class="service" href="#"> <div id="main-0" class="option-main seleceted" href="#"> <div class="main-up"></div> <div class="main-down"></div> </div> </a> <div id="main-1" class="option-main" href="#"> <a id="service-1" class="service" href="#"><div class="main-up">0.00€</div></a> <div class="main-down"> Needs extra users?<br> <input id="range-option-1" class="slider" type="range" min="0" max="20" value="0"> </div> </div> <div id="main-2" class="option-main" href="#"> <a id="service-2" class="service" href="#"><div class="main-up">14.90€</div></a> <div class="main-down"> Needs extra users?<br> <input id="range-option-2" class="slider" type="range" min="0" max="20" value="0"> </div> </div> <div id="main-3" class="option-main" href="#"> <a id="service-3" class="service" href="#"><div class="main-up">24.90€</div></a> <div class="main-down"> Needs extra users?<br> <input id="range-option-3" class="slider" type="range" min="0" max="20" value="0"> </div> </div> </div> <div class="row"> <a class="option-secondary" href="#"> <div class="secondary-table"> <div class="secondary-cell"> FREE </div> </div> </a> <a class="option-secondary" href="#"> <div class="secondary-table"> <div class="secondary-cell"> 2,99 €HT / user<br> <span class="span-font-normal">- - - - - - - - - - - - -</span> Total: <span id="total-monthly-1">2,99</span> €HT </div> </div> </a> <a class="option-secondary" href="#"> <div class="secondary-table"> <div class="secondary-cell"> 14,90 €HT<br> <span class="span-font-normal">- - - - - - - - - - - - -</span><br> + 9,90 €HT / user<br> <span class="span-font-normal">- - - - - - - - - - - - -</span> Total: <span id="total-monthly-2">2,99</span> €HT </div> </div> </a> <a class="option-secondary" href="#"> <div class="secondary-table"> <div class="secondary-cell"> 24,90 €HT<br> <span class="span-font-normal">- - - - - - - - - - - - -</span><br> + 14,90 €HT / user<br> <span class="span-font-normal">- - - - - - - - - - - - -</span> Total: <span id="total-monthly-3">2,99</span> €HT </div> </div> </a> </div> </div> <div id="console"></div>