Question

我有一种电子商务，您有多种选择：

首先是通过单击一些按钮来更改对象的价格。
第二个是除了第一个选择之外的某些服务的复选框（因此我可以拥有tot price = button + checkboxes）

直到这一切都很好。

最后，我有一个range滑块input来计算负载，并且我希望max的范围是=等于{{1 }}与div

您可以在代码或jsfiddle中看到，最高价格不会像id="aaa" div那样变化（最高价值= 5000）如何动态更改？

aaa

//checkboxes and buttons

var basicPrice = 5000; // This is how we start
function getCheck() {
  var currentPrice = basicPrice; // every time
  currentPrice = parseFloat($(".event-hook-class.active").data("prezzo")) || basicPrice, // add any "active" boxes
    services = [],
    total = 0;
    console.log(currentPrice)
  $("input[id^=service]").each(function() {
    if (this.checked) {
      total += +this.value;
      services.push($("[for=" +this.id + "]").html()); // get the label text
    }
  });
  $("#prezzo").text((currentPrice + total).toFixed(2) + "€");
    $("#aaa").text((currentPrice + total).toFixed(2));
  $("#serv").html("services: " + services.join(", "));
}


$(document).ready(function() {
  $("input[id^=service]").on("click", getCheck);
  $(".event-hook-class").on("click",function(e) {
    e.preventDefault();
    $(".event-hook-class").removeClass("active");
    $(this).addClass("active")
    $("#prezzo").html($(this).data('prezzo') + ' €');
    $("#mq").html($(this).data('mq'));
    getCheck(); // will add this and the checkboxes
  });
  getCheck(); // initialise on page load
});




//slider
$(document).ready(function(){

    
var  zzz = document.getElementById('aaa').innerText;  
document.getElementById('slider1').max = zzz;  
 });  
const $mutuo = $("#mutuo"),
  $rata = $("#rata"),
  $anni = $("#anni"),
  $slider1 = $("#slider1"),
  $slider2 = $("#slider2"),
  $max = $("#aaa").html();


function showAmount1(newAmount){
    document.getElementById('mutuo').innerHTML = newAmount;     
    $mutuo.val($("#mutuo").innerHTML);
    update();
}


function showAmount2(newAmount){

    document.getElementById('anni').innerHTML = newAmount; 
    $anni.val($("#anni").innerHTML);
    update();
}
    
    



  function update() {
  let interesseannuo = 1.60,
    C = $mutuo.html(),
    anni = $anni.html(),
    i = interesseannuo / 12 / 100,
    n = anni * 12,
    rata = C * i / (1 - Math.pow(1 + i, -n));

  $rata.html(rata.toFixed(2) + " €");
}
update();

Answer 1

Working fiddle 。

您需要更新max函数内的滑块的getCheck()属性，例如：

document.getElementById('slider1').max = currentPrice;

//checkboxes and buttons

var basicPrice = 5000; // This is how we start
function getCheck() {
  var currentPrice = basicPrice; // every time
  currentPrice = parseFloat($(".event-hook-class.active").data("prezzo")) || basicPrice, // add any "active" boxes
    services = [],
    total = 0;

  $("input[id^=service]").each(function() {
    if (this.checked) {
      total += +this.value;
      services.push($("[for=" + this.id + "]").html()); // get the label text
    }
  });
  $("#prezzo").text((currentPrice + total).toFixed(2) + "€");
  $("#aaa").text((currentPrice + total).toFixed(2));
  $("#serv").html("services: " + services.join(", "));

  document.getElementById('slider1').max = (currentPrice + total).toFixed(2);
}


$(document).ready(function() {
  $("input[id^=service]").on("click", getCheck);
  $(".event-hook-class").on("click", function(e) {
    e.preventDefault();
    $(".event-hook-class").removeClass("active");
    $(this).addClass("active")
    $("#prezzo").html($(this).data('prezzo') + ' €');
    $("#mq").html($(this).data('mq'));
    getCheck(); // will add this and the checkboxes
  });
  getCheck(); // initialise on page load
});




//slider
$(document).ready(function() {


  var zzz = document.getElementById('aaa').innerText;
  document.getElementById('slider1').max = zzz;
});
const $mutuo = $("#mutuo"),
  $rata = $("#rata"),
  $anni = $("#anni"),
  $slider1 = $("#slider1"),
  $slider2 = $("#slider2"),
  $max = $("#aaa").html();


function showAmount1(newAmount) {
  document.getElementById('mutuo').innerHTML = newAmount;
  $mutuo.val($("#mutuo").innerHTML);
  update();
}


function showAmount2(newAmount) {

  document.getElementById('anni').innerHTML = newAmount;
  $anni.val($("#anni").innerHTML);
  update();
}





function update() {
  let interesseannuo = 1.60,
    C = $mutuo.html(),
    anni = $anni.html(),
    i = interesseannuo / 12 / 100,
    n = anni * 12,
    rata = C * i / (1 - Math.pow(1 + i, -n));

  $rata.html(rata.toFixed(2) + " €");
}
update();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="event-hook-class simple-text piano" id="C.1_1" data-prezzo="5000" data-mq="94">
                              C.1_1 <br> piano 1<br> prezzo 5000 €</button><button type="button" class="event-hook-class simple-text piano" id="D.1_1" data-prezzo="10000" data-mq="94">
                              D.1_1 <br> piano 1<br> prezzo 10000 €</button><button type="button" class="event-hook-class simple-text piano" id="C_2.1" data-prezzo="15000" data-mq="94">
                              C_2.1 <br> piano 2<br> prezzo 15000 €</button><br><br><br><br>

<form id="services" name="services-form" data-name="services Form">
  <div class="checkbox-field w-checkbox"><input type="checkbox" value="22500" id="service_1" name="checkbox" data-name="Checkbox" class="checkbox 1 w-checkbox-input"><label for="service_1" class="simple-text white w-form-label">design pack</label> 22500 €</div>
  <div class="checkbox-field ew w-checkbox"><input type="checkbox" value="2000 " id="service_2" name="checkbox-2" data-name="service_2" class="checkbox 2 w-checkbox-input"><label for="service_2" class="simple-text white w-form-label">security</label> 2000 €</div>
  <div class="checkbox-field 2 w-checkbox"><input type="checkbox" value="5000" id="service_3" name="checkbox-2" data-name="service_3" class="checkbox 3 w-checkbox-input"><label for="service_3" class="simple-text white w-form-label">wellness pack</label> 5000 €</div>
  <div class="checkbox-field 4 w-checkbox"><input type="checkbox" value="1000" id="service_4" name="checkbox-2" data-name="service_4" class="checkbox 4 w-checkbox-input"><label for="service_4" class="simple-text white w-form-label">box auto</label> 1000 €</div>
</form>

<br><br><br>


<div class="paragraph" id="prezzo">
  200 €</div>


<br><br><br>

<div class="info-text-wrapper">
  <p class="info-paragraph black" id="aaa"></p>
  <p class="info-paragraph black">Totale mutuo (€)</p>
  <input type="range" min="0" max="" value="" step=".01" onchange="showAmount1(this.value)" id="slider1" />

  <div class="info-paragraph black" type="text" id="mutuo">0</div><br><br><br>

  <p class="info-paragraph black">Durata mutuo (anni)</p>
  <input type="range" min="10" max="30" value="10" step="5" onchange="showAmount2(this.value)" id="slider2">
  <div class="info-paragraph black" type="text" id="anni">10</div><br><br><br>

  <p class="info-paragraph black">La tua rata</p>
  <div class="paragraph" id="rata"></div><br>
</div>

单击复选框和按钮后动态更改滑块值

1 个答案: