Question

我真的不知道如何使用 Javascript 进行编程，但是我尝试做一些事情。如果选择了一些值，则我有一些要累加的值。以下功能仅对checkbox字段而不是dropdown列表和文本字段单击按钮，即可求和并立即显示结果。

但是，我还需要包含dropdown列表中的选定值，并以checkboxes及其立即响应（输出）的相同方式输入两个文本字段。

我认为change方法可以以相同的方式使用。

@编辑：

对不起，我忘了告诉我，但我需要将m2输入的值乘以3134,204499，然后将Bina Yasi与-566,2202888相乘。

function calcAndShowTotal() {
  var total = 55435.04798; // it is constant value which must be the beginning value.
  $('#housepriceguesslist :checkbox:checked').each(function() {
    total += parseFloat($(this).attr('price')) || 0;
  });
  $('#total').val(total);
}

$('#housepriceguesslist :checkbox').change(calcAndShowTotal).change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="housepriceguesslist">


  <select id="ilce">
    <option value="0">Choose a state</option>
    <option value="63999.50712318567">Adalar</option>
    <option value="6259.918435398593">Ataşehir</option>
    <option value="46285.35729304834">Beykoz</option>
    <option value="54258.92953697798">Kadıköy</option>
    <option value="-3500.620905653726">Kartal</option>
    <option value="12889.41219909602">Maltepe</option>
    <option value="-33711.83156847153">Pendik</option>
    <option value="-34577.42485251657">Sancaktepe</option>
    <option value="-52183.1608811019">Sultanbeyli</option>
    <option value="-34760.71735007784">Tuzla</option>
    <option value="-27379.87966213786">Çekmeköy</option>
    <option value="-5332.203990418937">Ümraniye</option>
    <option value="26485.33532820411">Üsküdar</option>
    <option value="-18732.62070553167">Şile</option>
  </select>

  <select id="odasalon">
    <option value="0">Choose room number</option>
    <option value="5940.027623576261">1+0</option>
    <option value="-1399.625767475593">1+1</option>
    <option value="-3033.638999060459">2+1</option>
    <option value="11519.83954756076">3+1</option>
    <option value="-7018.52116545078">4+1</option>
    <option value="-6008.081239150166">5+1</option>
  </select>

  m2: <input type="text" id="m2" /> Bina Yasi: <input type="text" id="binayasi" />



  <br/>
  <br/> Features:

  <br/>
  <br/>
  <input type="checkbox" id="Bati" value="Bati" price="-783.4452683566533" /> <label for="Bati">Bati</label>
  <br/>
  <input type="checkbox" id="Dogu" value="Dogu" price="-4895.732009084263" /> <label for="Dogu">Dogu</label>
  <br/>
  <input type="checkbox" id="Guney" value="Guney" price="-2599.001349652765" /> <label for="Guney">Guney</label>
  <br/>
  <input type="checkbox" id="Kuzey" value="Kuzey" price="3832.013070771234" /> <label for="Kuzey">Kuzey</label>
  <br/>
  <input type="checkbox" id="Amerikan Mutfak" value="Amerikan Mutfak" price="2346.347889828301" /> <label for="Amerikan Mutfak">Amerikan Mutfak</label>
  <br/>
  <input type="checkbox" id="Dusakabin" value="Dusakabin" price="-176.5092353740256" /> <label for="Dusakabin">Dusakabin</label>
  <br/>
  <input type="checkbox" id="Akilli Ev" value="Akilli Ev" price="-4756.206384200719" /> <label for="Akilli Ev">Akilli Ev</label>
  <br/>
  <input type="checkbox" id="Ebeveyn Banyosu" value="Ebeveyn Banyosu" price="10135.50644456019" /> <label for="Ebeveyn Banyosu">Ebeveyn Banyosu</label>
  <br/>
  <input type="checkbox" id="Kiler" value="Kiler" price="-10693.49979821809" /> <label for="Kiler">Kiler</label>
  <br/>
  <input type="checkbox" id="Kuvet" value="Kuvet" price="-941.0629741243247" /> <label for="Kuvet">Kuvet</label>
  <br/>
  <input type="checkbox" id="Parke Zemin" value="Parke Zemin" price="-8453.847199707092" /> <label for="Parke Zemin">Parke Zemin</label>
  <br/>
  <input type="checkbox" id="Seramik Zemin" value="Seramik Zemin" price="1545.025601000643" /> <label for="Seramik Zemin">Seramik Zemin</label>
  <br/>
  <input type="checkbox" id="Sauna" value="Sauna" price="8677.708176289747" /> <label for="Sauna">Sauna</label>
  <br/>
  <input type="checkbox" id="Spor Salonu" value="Spor Salonu" price="1159.884679563385" /> <label for="Spor Salonu">Spor Salonu</label>
  <br/>
  <input type="checkbox" id="Tenis Kortu" value="Tenis Kortu" price="16065.26794172257" /> <label for="Tenis Kortu">Tenis Kortu</label>
  <br/>
</div>
<input type="text" id="total" value="0" />

Answer 1

您可以使用以下命令遍历所有<select>框和文本输入：

function calcAndShowTotal() {
  var total = 55435.04798; // it is constant value which must be the beginning value.
  $('#housepriceguesslist :checkbox:checked').each(function() {
    total += parseFloat($(this).attr('price')) || 0;
  });
  $("#housepriceguesslist select, #housepriceguesslist :text").each(function() {
    let multiplier = 1;
    if (this.id == "m2") {
      multiplier = 3134.204499;
    }
    else if (this.id == "binayasi") {
      multiplier = -566.2202888;
    }
    if (this.value) {
      total += parseFloat(this.value) * multiplier;
    }
  });
  $('#total').val(total);
}

如果您更改复选框以使用value而不是price，则可以一次完成所有操作：

function calcAndShowTotal() {
  var total = 55435.04798; // it is constant value which must be the beginning value.
  $('#housepriceguesslist :checkbox:checked').each(function() {
    total += parseFloat($(this).attr('price')) || 0;
  });
  $("#housepriceguesslist select, #housepriceguesslist :text, #housepriceguesslist :checkbox:checked").each(function() {
    let multiplier = 1;
    if (this.id == "m2") {
      multiplier = 3134.204499;
    else if (this.id == "binyasi") {
      multiplier = -566.2202888;
    }
    if (this.value) {
      total += parseFloat(this.value) * multiplier;
    }
  });
  $('#total').val(total);
}

并在更改任何输入时调用该函数：

$('#housepriceguesslist input, #housepriceguesslist select').change(calcAndShowTotal).change();

Answer 2

类似于Barmar，我将所有元素都添加到$ cat a.awk { gsub("%27","'",$1); print $1 } $ echo '%27SWAY%27'| awk -f a.awk 'SWAY'循环中，还向所有元素中添加了.each()处理程序：

.change()

在此处查看示例：https://jsfiddle.net/qgvsern4/1/

Answer 3

此解决方案很简单，只需使用Save方法和选择器if(this.Validate()){ /*...*/ }获取所有输入（即import re my_list = ['catalogue/category/books/travel_2/index.html', 'catalogue/category/books/mystery_3/index.html', 'catalogue/category/books/historical-fiction_4/index.html'] REGEX = r'(catalogue/|category/|books/|_\d+/index.html)' my_list = [re.sub(REGEX, '', string) for string in my_list] print(my_list)和['travel', 'mystery', 'historical-fiction']）的列表即可。然后验证这些checkbox元素中的每一个是否分别对dropdown和.find()输入类型具有属性'input:checkbox, input:text, select'或inputs，或者它是一个乘数checked输入。可以在select方法回调内部完成此验证。最后，只需使用checkbox方法将值转换为数字，然后将其添加到累加器中即可。

最后，将值加到select输入中。像这样：

text

each()

注意：

请记住对数字取整以提高精度。选项卡或移动到另一个元素后，将应用文本修改。因此，我添加了一个Enter侦听器，因此当您按Enter时，将移至下一个元素，就像您按Tab一样。另外，我将总数移到顶部，以便您可以在预览中查看结果。

更新：

我建议您在准备好后使用parseFloat()来获取文档。在内部，您可以分配元素的值。我注意到，每当您取消选中选中的元素时，我的代码中都会存在一个错误，总计应该为total，但是它却显示出两倍，因为let container; let inputs; let total; function calcAndShowTotal() { let sum = 55435.04798; // it is constant value which must be the beginning value. let value; inputs.each(function() { if ($(this).is('input:checkbox:checked')) { // If is a checkbox value = parseFloat($(this).attr('price')) || 0; sum += value; } else if ($(this).is('input:text:not(#total)')) { // If is a text wait until you move to another element let factor = 1; if (this.id == 'm2') { factor = 3134.204499; } else if (this.id == 'binayasi') { factor = -566.2202888; } value = parseFloat($(this).val()) * factor || 0; sum += value; } else if ($(this).is('select')) { // If is a option from the select element value = parseFloat($('option:selected', this).val()) || 0; sum += value; } }); total.val(sum); } function initHandlers() { inputs.on('keydown', function(e) { let focusable, next; if (e.keyCode == 13) { focusable = inputs.filter(':visible'); next = focusable.eq(focusable.index(this) + 1); if (next.length) { next.focus(); } return false; } }); inputs.change(calcAndShowTotal); calcAndShowTotal(); } $(function() { console.log('ready!'); total = $('#total'); container = $('#housepriceguesslist'); inputs = container.find('input:checkbox, input:text, select'); initHandlers(); });也是<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="housepriceguesslist"> Total: <input type="text" id="total" value="0" /> <br/> <br/> <select id="ilce"> <option value="0">Choose a state</option> <option value="63999.50712318567">Adalar</option> <option value="6259.918435398593">Ataşehir</option> <option value="46285.35729304834">Beykoz</option> <option value="54258.92953697798">Kadıköy</option> <option value="-3500.620905653726">Kartal</option> <option value="12889.41219909602">Maltepe</option> <option value="-33711.83156847153">Pendik</option> <option value="-34577.42485251657">Sancaktepe</option> <option value="-52183.1608811019">Sultanbeyli</option> <option value="-34760.71735007784">Tuzla</option> <option value="-27379.87966213786">Çekmeköy</option> <option value="-5332.203990418937">Ümraniye</option> <option value="26485.33532820411">Üsküdar</option> <option value="-18732.62070553167">Şile</option> </select> <select id="odasalon"> <option value="0">Choose room number</option> <option value="5940.027623576261">1+0</option> <option value="-1399.625767475593">1+1</option> <option value="-3033.638999060459">2+1</option> <option value="11519.83954756076">3+1</option> <option value="-7018.52116545078">4+1</option> <option value="-6008.081239150166">5+1</option> </select> m2: <input type="text" id="m2" /> Bina Yasi: <input type="text" id="binayasi" /> <br/> <br/> Features: <br/> <br/> <input type="checkbox" id="Bati" value="Bati" price="-783.4452683566533" /> <label for="Bati">Bati</label> <br/> <input type="checkbox" id="Dogu" value="Dogu" price="-4895.732009084263" /> <label for="Dogu">Dogu</label> <br/> <input type="checkbox" id="Guney" value="Guney" price="-2599.001349652765" /> <label for="Guney">Guney</label> <br/> <input type="checkbox" id="Kuzey" value="Kuzey" price="3832.013070771234" /> <label for="Kuzey">Kuzey</label> <br/> <input type="checkbox" id="Amerikan Mutfak" value="Amerikan Mutfak" price="2346.347889828301" /> <label for="Amerikan Mutfak">Amerikan Mutfak</label> <br/> <input type="checkbox" id="Dusakabin" value="Dusakabin" price="-176.5092353740256" /> <label for="Dusakabin">Dusakabin</label> <br/> <input type="checkbox" id="Akilli Ev" value="Akilli Ev" price="-4756.206384200719" /> <label for="Akilli Ev">Akilli Ev</label> <br/> <input type="checkbox" id="Ebeveyn Banyosu" value="Ebeveyn Banyosu" price="10135.50644456019" /> <label for="Ebeveyn Banyosu">Ebeveyn Banyosu</label> <br/> <input type="checkbox" id="Kiler" value="Kiler" price="-10693.49979821809" /> <label for="Kiler">Kiler</label> <br/> <input type="checkbox" id="Kuvet" value="Kuvet" price="-941.0629741243247" /> <label for="Kuvet">Kuvet</label> <br/> <input type="checkbox" id="Parke Zemin" value="Parke Zemin" price="-8453.847199707092" /> <label for="Parke Zemin">Parke Zemin</label> <br/> <input type="checkbox" id="Seramik Zemin" value="Seramik Zemin" price="1545.025601000643" /> <label for="Seramik Zemin">Seramik Zemin</label> <br/> <input type="checkbox" id="Sauna" value="Sauna" price="8677.708176289747" /> <label for="Sauna">Sauna</label> <br/> <input type="checkbox" id="Spor Salonu" value="Spor Salonu" price="1159.884679563385" /> <label for="Spor Salonu">Spor Salonu</label> <br/> <input type="checkbox" id="Tenis Kortu" value="Tenis Kortu" price="16065.26794172257" /> <label for="Tenis Kortu">Tenis Kortu</label> <br/> </div>的输入。

无需单击按钮即可评估值总和

3 个答案:

注意：

更新：