Question

我在这段代码中苦苦挣扎，我有两个js，它们通过id =＃prezzo动态更改div的价格。

我的问题是我有一个基本价格1000，我希望在单击三个按钮之一时可以忽略该价格（而在单击复选框时不要被忽略）。

var basicPrice = 1000; // This is how we start
function getCheck() {
  var currentPrice = basicPrice; // every time
  currentPrice += parseFloat($(".event-hook-class.active").data("prezzo")) || 0, // 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) + "€");
  $("#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
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<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="1080.56" data-mq="94">
                              C.1_1 <br> piano 1<br> prezzo 1080.56 €</button><br><button type="button" class="event-hook-class simple-text piano" id="D.1_1" data-prezzo="1084.72" data-mq="94">
                              D.1_1 <br> piano 1<br> prezzo 1084.72 €</button><br><button type="button" class="event-hook-class simple-text piano" id="C_2.1" data-prezzo="1109.68" data-mq="94">
                              C_2.1 <br> piano 2<br> prezzo 1109.68 €</button><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>

<div class="paragraph" id="prezzo">
  1000 €</div>
<div id="display_services" class="simple-text maiusc prova">services:<br>design pack<br>dynamically adding the services...</div>

我是js世界的新手，所以我不知道该怎么做：

Answer 1

在getCheck函数中，更改当前价格变量以在活动按钮价格和基本价格之间进行选择：

var basicPrice = 1000; // This is how we start
function getCheck() {
  var 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) + "€");
  $("#serv").html("services: " + services.join(", "));
}

使用javascript覆盖和求和价格

1 个答案: