如何在Javascript中用逗号替换逗号

贝里斯科

我有一个带有多个选项的html select元素，当选定的javascript将显示特定的输入字段时。在这些字段中，我具有将逗号（，）更改为点（。）的javascript函数。

问题是，只有输入ID为ID的输入字段#size将起作用，而选择其他输入字段时，则保持不变。我正在使用jQuery。

<select id="switch" name="switch">
  <option value="">Select...</option>
  <option value="size">Size</option>
  <option value="weight">Weight</option>
  <option value="dimensions">Dimensions</option>
</select>

<div class="switch-body">
<!-- javascript content goes here -->
</div>

Javascript：

$(document).ready(function() {
    $("#switch").change(function() {
        //if selected option is size
        if ($(this).val() == "size") {
            $(".switch-body").html('<input type="text" id="size" placeholder="Product Size">');
        }
        //if selected option is weight
        else if ($(this).val() == "weight") {
            $(".switch-body").html('<input type="text" id="weight" placeholder="Product Weight">');
        }
        //if selected option is weight
        else if ($(this).val() == "dimensions") {
            $(".switch-body").html(`
            <input type="text" id="height" placeholder="Product Height">
            <input type="text" id="width" placeholder="Product Width">
            <input type="text" id="length" placeholder="Product Length">
            `);
        }
        //if selected option is none
        else if ($(this).val() == "") {
            $(".switch-body").html("");
        }
    });

    //replaces comma with dot (here is the problem)
    $(".switch-body").keyup(function(){
        $("#size").val($("#size").val().replace(/,/g, '.'));
        $("#weight").val($("#weight").val().replace(/,/g, '.'));
        $("#height").val($("#height").val().replace(/,/g, '.'));
        $("#width").val($("#width").val().replace(/,/g, '.'));
        $("#length").val($("#length").val().replace(/,/g, '.'));
    });
});

在此javascript代码之外的其他输入字段上的替换功能也可以正常工作。

罗里·麦克罗森（Rory McCrossan）

问题是因为您的replace()逻辑试图处理undefined值，而DOM中尚不存在这些字段。它似乎只适用于此，#size因为它在列表中排在第一位。如果您在控制台“运行”后对其进行检查，您会发现替换该控制台会#weight导致错误。

要解决此问题，请在所有input元素上放置一个通用类，然后提供一个函数，val()该函数将返回新值以根据当前字段更新该字段，如下所示：

$(".switch-body").keyup(function() {
  $(".no-comma").val(function(i, v) {
    return v.replace(/,/g, '.');
  });
});

$(document).ready(function() {
  $("#switch").change(function() {
    //if selected option is size
    if ($(this).val() == "size") {
      $(".switch-body").html('<input type="text" id="size" placeholder="Product Size" class="no-comma">');
    }
    
    //if selected option is weight
    else if ($(this).val() == "weight") {
      $(".switch-body").html('<input type="text" id="weight" placeholder="Product Weight" class="no-comma">');
    }
    
    //if selected option is weight
    else if ($(this).val() == "dimensions") {
      $(".switch-body").html(`
        <input type="text" id="height" placeholder="Product Height" class="no-comma">
        <input type="text" id="width" placeholder="Product Width" class="no-comma">
        <input type="text" id="length" placeholder="Product Length" class="no-comma">`);
    }
    
    //if selected option is none
    else if ($(this).val() == "") {
      $(".switch-body").html("");
    }
  });

  //replaces comma with dot (here is the problem)
  $(".switch-body").keyup(function() {
    $(".no-comma").val(function(i, v) {
      return v.replace(/,/g, '.');
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="type">Type</label>
  <br>
  <select id="switch" class="custom-select" name="switch">
    <option value="">Select...</option>
    <option value="size">Size</option>
    <option value="weight">Weight</option>
    <option value="dimensions">Dimensions</option>
  </select>
</div>
<div class="form-group switch-body">
  <!-- content here -->
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。