如何在具有相同类名的页面的不同部分上运行相同的功能

Question

我具有计算两个字段之间的差异并将其显示在第三个字段中的功能。一切正常。如果我的html中有多个“ mysection”来计算每个部分中字段之间的差异，该如何运行相同的功能？

$(document).ready(function(){
    var total=$(".field2");
    total.keyup(function(){
	var diff = Number($(".field2").val()) - Number($(".field1").val());	
   $(".field3").val(diff.toFixed(2));
    });	
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mysection">
	<input type="text" name="field1" value="" size="30" maxlength="300" class="field1">
	<input type="text" name="field2" value="" size="30" maxlength="300" class="field2">
	<input type="text" name="field3" value="" size="30" maxlength="300" class="field3">
	</div>

Answer 1

您可以使用siblings和$(this)。还要从父级div.mysection委托事件。

在这种情况下，按键事件$(this).val()将通过field2元素获取输入值，而$(this).siblings('.field1').val()将从具有此类的兄弟元素获取值

$(document).ready(function() {
  $('.mysection').on('keyup', '.field2', function() {
    var field2Val = $(this).val();
    let getFieldOne = $(this).siblings('.field1').val();
    var diff = Number(field2Val) - Number(getFieldOne);
    $(this).siblings(".field3").val(diff.toFixed(2));
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mysection">
  <input type="text" name="field1" value="" size="30" maxlength="300" class="field1">
  <input type="text" name="field2" value="" size="30" maxlength="300" class="field2">
  <input type="text" name="field3" value="" size="30" maxlength="300" class="field3">
</div>

<div class="mysection">
  <input type="text" name="field1" value="" size="30" maxlength="300" class="field1">
  <input type="text" name="field2" value="" size="30" maxlength="300" class="field2">
  <input type="text" name="field3" value="" size="30" maxlength="300" class="field3">
</div>

Answer 2

您可以使用div作为所有输入子项的选择器，而不仅仅是选择一个子项。

var total=$("div input");

您可以改为这样做。

Answer 3

$(this).parent()

如果每个输入组都包装在单独的标记（例如<fieldset>）中，然后所有内容都包装在<form>标记中：

• 将<form>绑定到按键（或按键），输入和更改事件。

  

$('form').on('keydown input change', ...

  

• 接下来，将 event data 分配为所有<input>，<textarea>和/或<select>
的选择器

  

$('form').on('keydown input change', 'input, textarea, select', function(e) {...

  

如果
• 现在$(this)与事件数据参数（例如'input, textarea, select'）中的任何内容匹配，将成为clicked ^✱标记。使用以下表达式引用单击的标记的父标记（例如<fieldset>）。

  

var fieldset = $(this).parent();

  

• 然后使用set.find()的变体将变量分配给父标记中的所有事物。

  

var A = Number(fieldset.find('.A').val());
var B = Number(fieldset.find('.B').val());
var O = fieldset.find('.O').val();
...
fieldset.find('.C').val(Math.round(100 * C) / 100);

  

^{✱技术上没有单击$(this)，this关键字是函数所有者，但事件数据参数方便地处理{ {1}}为$(this)。在这种情况下，event.target是任何输入，文本区域或选择，它是按键，输入或更改事件的事件来源。}

---

演示

添加了额外的功能，它可以加，除，乘，减

e.target

$('#calc').on('keydown input change', 'input, select', function(e) {
  var set = $(this).parent();
  var A = Number(set.find('.A').val());
  var B = Number(set.find('.B').val());
  var O = set.find('.O').val();
  var C = 0;
  switch (O) {
    case '-':
      C = A - B;
      break;
    case '+':
      C = A + B;
      break;
    case '*':
      C = A * B;
      break;
    case '/':
      C = A / B;
      break;
    default:
      break;
  }
  set.find('.C').val(Math.round(100 * C) / 100);
});

label,
input,
output,
select {
  font: inherit;
  display: inline-block;
  text-align: center;
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
}