Question

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

问题在于，只有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代码之外的其他输入字段上的replace函数工作正常。

Answer 1

问题是因为您的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>

Answer 2

要做的第一件事是检查控制台。代码失败是因为尝试替换的某些元素未定义，因为每次更改选择时都会创建并销毁HTML元素。更好的方法是隐藏和显示元素。

示例代码：

<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">
  <div class="show-size">
    <input type="text" id="size" placeholder="Product Size">
  </div>
  <div class="show-weight">
    <input type="text" id="weight" placeholder="Product Weight">
  </div>
  <div class="show-dimensions">
    <input type="text" id="height" placeholder="Product Height">
    <input type="text" id="width" placeholder="Product Width">
    <input type="text" id="length" placeholder="Product Length">
  </div>
</div>

$(document).ready(function() {
    $(".switch-body").children().each(function() {
      $(this).hide();
    });
    $("#switch").change(function() {
            $(".switch-body").children().each(function() {
            $(this).hide();
        });
        //if selected option is size
        if ($(this).val() == "size") {
            $(".show-size").show();
        }
        //if selected option is weight
        else if ($(this).val() == "weight") {
            $(".show-weight").show();
        }
        //if selected option is weight
        else if ($(this).val() == "dimensions") {
            $(".show-dimensions").show();
        }
    });

    //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, '.'));
    });
});

此JS Fiddle中的代码。

如何在Javascript中用点替换逗号

2 个答案: