Question

我在写计算器

问题：单击按钮时，我需要将$('.plan-select').val()添加到$('output').text()中。事件change()和input()并没有帮助在处理程序中捕获它的变化，所以我在https://developer.mozilla.org/ru/docs/Web/Events的这里发现了ValueChange()事件。

我需要<output>才能在单击时立即刷新，它在PC上的ValueChange()上正常工作，但在移动设备上无法正常工作。

// Button
$('.plan-select').on('click', function() {
  var value = $(this).data("plan");
  $(".planlist").val(parseInt(value)).change();
});


// Handler. it collects checked checkboxes and <select> statement
window.addEventListener('DOMContentLoaded', function() {
  var form = document.querySelector('form'),
    elem = form.querySelectorAll('[name^="itemtype"]'),
    value = form.querySelectorAll('[name^="labelname"]'),
    output = document.querySelector('output');

  function total() {
    output.innerHTML = [].reduce.call(elem, function(sum, el) {
      var n = (+el.value || 0) * (el.checked || el.tagName == "SELECT" || el.type == "text");
      return sum + n
    }, 0);
  }

  form.addEventListener('ValueChange', total);
  form.addEventListener('change', total);
  form.addEventListener('input', total);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Buttons -->
<a href="#pricing" class="plan-select" data-plan="35000">Option1</a>
<a href="#pricing" class="plan-select" data-plan="45000">Option2</a>
<a href="#pricing" class="plan-select" data-plan="65000">Option3</a>



<!-- Form -->
<div id="pricing">
  <form id="calc">
    <select name="itemtype5" class="planlist" id="l">
      <option class="no-display" value="0">Hidden</option>
      <option value="35000">Option1</option>
      <option value="45000">Option2</option>
      <option value="65000">Option3</option>
    </select>

    <input type="checkbox" class="checkbox_check" name="itemtype1" id="d" data-genrename="Genre1" value="3000" data-time="10">
    <label>Genre1</label>

    <input type="checkbox" class="checkbox_check" name="itemtype2" id="e" data-genrename="Genre2" value="4000" data-time="15">
    <label>Genre</label>

    <input type="checkbox" class="checkbox_check" name="itemtype3" id="f" data-genrename="Genre3" value="10000" data-time="24">
    <label>Genre3</label>

    <input type="checkbox" class="checkbox_check" name="itemtype4" id="g" data-genrename="Genre4" value="3000" data-time="10">
    <label>Genre4</label>


    <label>Total:</label>
    <output name="o" class="total" for="a b c d e f g h l">35000</output>

  </form>
</div>

按钮： https://elevate.kz/#plans

处理程序： https://elevate.kz/#pricing

谢谢。

Answer 1

您对genre3的引用有误

尝试完全使用jQuery：

curl -X POST http://localhost:8083/connectors -H "Content-Type: application/json" -d '{
 "name": "newtopic",
 "config": { 
"tasks.max":1,
 "connector.class":"com.mongodb.kafka.connect.MongoSourceConnector", 
 "key.converter":"org.apache.kafka.connect.json.JsonConverter", 
 "key.converter.schemas.enabled": "true",
 "value.converter":"org.apache.kafka.connect.json.JsonConverter", 
 "value.converter.schemas.enabled": "true",
 "connection.uri":"[MONGOURL]", 
 "database":"dbname", 
 "collection":"collname", 
 "pipeline":"[]", 
 "topic.prefix": "", 
 "publish.full.document.only": "true" 
 }}'

function total() {
  let sum = 0;
  $("form :input").each(function() {
    var n = (+this.value || 0) * (this.checked || this.tagName == "SELECT" || this.type == "text");
    sum += n
  })
  $(".total").text(sum);
}  

$(function() {
  // Button
  $('.plan-select').on('click', function() {
    var value = $(this).data("plan");
    $(".planlist").val(parseInt(value)).change();
  });

  $("#calc").on("change", "select[name^=itemtype]", total)
  $("select[name^=itemtype]").trigger("change"); 
  $("#calc").on("touchstart click", "input[type=checkbox][name^=itemtype]", total); 
  $("#calc").on("input", "input[type=text][name^=itemtype]", total); // if exists


});

ValueChange（）事件在移动设备上不起作用

1 个答案: