解决jQuery多输入表单中重复脚本选择器冲突的策略

// 模数计算 (Module Calculation)
$(document).ready(function(){
  $('input[type="text"]').keyup(function () {
    var valZ = parseInt($('.jumlahGigi').val()); // 可能会获取到第一个匹配的.jumlahGigi
    var valD = parseInt($('.diameterPitch').val()); // 可能会获取到第一个匹配的.diameterPitch
    var sum = valD / valZ;
    $("input#resultModule").val(sum);
  });
});

// 齿数计算 (Amount of Teeth Calculation)
$(document).ready(function(){
  $('input[type="text"]').keyup(function () {
    var valM = parseInt($('.module').val()); // 可能会获取到第一个匹配的.module
    var valD = parseInt($('.diameterPitch').val()); // 可能会获取到第一个匹配的.diameterPitch
    var sum = valD / valM;
    $("input#resultAot").val(sum);
  });
});

// 节径计算 (Diameter Pitch Calculation)
$(document).ready(function(){
  $('input[type="text"]').keyup(function () {
    var valM = parseInt($('.module').val()); // 可能会获取到第一个匹配的.module
    var valZ = parseInt($('.jumlahGigi').val()); // 可能会获取到第一个匹配的.jumlahGigi
    var sum = valZ * valM;
    $("input#resultDP").val(sum);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<div class="general">
  <!-- 模数计算模块 -->
  <div class="module-calc">
    <label class="label"> 模数 (Module) </label>
    <input type="text" class="moduleDiameterPitch" placeholder="节径 (Diameter Pitch)">
    <input type="text" class="moduleJumlahGigi" placeholder="齿数 (Amount of Teeth)">
    <input type="text" disabled="disabled" id="resultModule" placeholder="模数 (Module)">
  </div>

  <!-- 齿数计算模块 -->
  <div class="aot-calc">
    <label class="label"> 齿数 (Amount of Teeth) </label>
    <input type="text" class="aotDiameterPitch" placeholder="节径 (Diameter Pitch)">
    <input type="text" class="aotModule" placeholder="模数 (Module)">
    <input type="text" disabled="disabled" id="resultAot" placeholder="齿数 (Amount of Teeth)">
  </div>

  <!-- 节径计算模块 -->
  <div class="diameterPitch-calc">
    <label class="label"> 节径 (Diameter Pitch) </label>
    <input type="text" class="diameterJumlahGigi" placeholder="齿数 (Amount of Teeth)">
    <input type="text" class="diameterModule" placeholder="模数 (Module)">
    <input type="text" placeholder="节径 (Diameter Pitch)" disabled="disabled" id="resultDP">
  </div>
</div>

// 模数计算
$(document).ready(function() {
  // 监听所有文本输入框的按键抬起事件，但内部选择器是精确的
  $('input[type="text"]').keyup(function() {
    var valZ = parseInt($('.moduleJumlahGigi').val());
    var valD = parseInt($('.moduleDiameterPitch').val());
    // 确保输入是有效的数字
    if (!isNaN(valZ) && !isNaN(valD) && valZ !== 0) {
      var sum = valD / valZ;
      $("input#resultModule").val(sum.toFixed(2)); // 保留两位小数
    } else {
      $("input#resultModule").val(''); // 清空结果或显示错误
    }
  });
});

// 齿数计算
$(document).ready(function() {
  $('input[type="text"]').keyup(function() {
    var valM = parseInt($('.aotModule').val());
    var valD = parseInt($('.aotDiameterPitch').val());
    if (!isNaN(valM) && !isNaN(valD) && valM !== 0) {
      var sum = valD / valM;
      $("input#resultAot").val(sum.toFixed(2));
    } else {
      $("input#resultAot").val('');
    }
  });
});

// 节径计算
$(document).ready(function() {
  $('input[type="text"]').keyup(function() {
    var valM = parseInt($('.diameterModule').val());
    var valZ = parseInt($('.diameterJumlahGigi').val());
    if (!isNaN(valM) && !isNaN(valZ)) {
      var sum = valZ * valM;
      $("input#resultDP").val(sum.toFixed(2));
    } else {
      $("input#resultDP").val('');
    }
  });
});

// 假设每个计算模块有一个父容器 .calc-container
$('.calc-container input[type="text"]').keyup(function() {
  // 获取当前输入框所在的父计算模块
  var $currentModule = $(this).closest('.calc-container');

  // 在当前模块内部查找特定的输入字段
  var valZ = parseInt($currentModule.find('.jumlahGigi').val());
  var valD = parseInt($currentModule.find('.diameterPitch').val());
  var resultId = $currentModule.find('.result-output').attr('id'); // 假设结果输出框也有一个通用类

  // 执行计算并更新结果
  if (!isNaN(valZ) && !isNaN(valD) && valZ !== 0) {
    var sum = valD / valZ;
    $("#" + resultId).val(sum.toFixed(2));
  } else {
    $("#" + resultId).val('');
  }
});