Question

我要在选择的产品上验证产品的宽度和厚度，我已经用宽度完成了，但是对厚度感到困惑。

像

一样，我想验证10到200之间的宽度，也想验证1到30之间的厚度。因此，我设法验证宽度，但在管理厚度时感到困惑。这是我的代码：

  newHandleChange=(value)=>{
    localStorage.setItem("currentTime",value.format('h:mm a')) // if you really needs the local storage.

    this.setState({
        value: value.format('h:mm a')
    })
  }

$(function() {
  var $width = $('#width');
  var $thickness = $('#thickness');

  $('#product').change(function() {
    var $selected = $(this).find('option:selected');
    $width.prop({
      min: $selected.data('min'),
      max: $selected.data('max')
    });
    $thickness.prop({
      min: $selected.data('min'),
      max: $selected.data('max')
    });
  });
});

Answer 1

您可以添加更多特定的数据属性：

data-min-width，data-max-width，data-min-thickness，data-max-thickness

Answer 2

通过查看代码，您似乎正在尝试从所选选项中读取最大和最小宽度以及厚度数据属性，但是您只是在读取“最小”和“最大”而不是“最小宽度” ，“最小厚度”等。

请参见下面的代码

$(function() {
  var $width = $('#width');
  var $thickness = $('#thickness');

  $('#product').change(function() {
    var $selected = $(this).find('option:selected');
    $width.prop({
      min: $selected.data('min-width'),
      max: $selected.data('max-width')
    });
    $thickness.prop({
      min: $selected.data('min-thickness'),
      max: $selected.data('max-thickness')
    });
  });
});

Answer 3

使用data-min-width，data-max-width，data-min-thickness，data-max-thickness之类的数据属性，并使用jquery的attr属性来获取它。

$(function() {
  var $width = $('#width');
  var $thickness = $('#thickness');

  $('#product').change(function() {
    var $selected = $(this).find('option:selected');
    $width.prop({
      min: $selected.attr('data-min-width'),
      max: $selected.attr('data-max-width')
    });
    $thickness.prop({
       min: $selected.attr('data-min-thickness'),
       max: $selected.attr('data-max-thickness')
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  <select name="product" id="product" class="form-control">
    <option selected="selected" value="">Product type</option>
    <option value="Copper flat" data-min-width="10" data-max-width="200" data-min-thickness="1" data-max-thickness="20">Copper flat</option>
    <option value="Fabricated Copper Busbar" data-min-width="40" data-max-width="150" data-min-thickness="2" data-max-thickness="5">Fabricated Copper Busbar</option>
    <option value="Fabricated aluminium Busbar" data-min-width="3" data-max-width="20" data-min-thickness="1" data-max-thickness="9">Fabricated aluminium Busbar</option>
  </select>

  Width: <input type="number" id="width" required />
  
  thickness: <input type="number" id="thickness" required />
  <button>Submit</button>
</form>

如何在单个标签中使用两个data-min和data-max属性

3 个答案: