Question

我有一个表单，允许用户为简单的在线“恒温器”（最低温度，最高温度和PowerSaver最高温度）输入自己的自定义值。

我正在尝试编写一些jquery，以便当用户使用自定义值提交表单时，它会设置自定义值，还会更改文本以向用户显示他们所做的更改（例如“You've changed your minimum temperature to 5”）

目前，只有第一个表单字段“最低温度”正在工作，并设置正确的值。其他两个没有按预期工作。

此外，我希望用户能够一次设置所有自定义值（一个表单提交），并且以下语句可以同时显示在屏幕上，例如：

您已将最低温度更改为5
您已将最高温度更改为50 您已将节电保护器的最高温度更改为30

以上陈述只应显示用户是否在该字段上输入了值。即如果用户仅输入了最高温度值，则只应显示以下语句：

您已将最高温度更改为50

任何正确方向的帮助或指示都会非常感激。非常感谢提前！

表单代码：

    <form id="custom-values">
        <input type="text" id="mintemperature" placeholder="Minimum temperature">
        <input type="text" id="maxtemperature" placeholder="Maximum temperature">
        <input type="text" id="maxtemperatureps" placeholder="Max. PowerSaver temperature">
        <input type="submit" class="submit-button" value="Set!">
    </form>

Jquery代码：

$('#custom-values').on('submit', function(event) {
          event.preventDefault();

            if ($('#mintemperature').val() !== "") {
            $('#message').text("You've changed your minimum temperature to " + $('#mintemperature').val())
            thermostat.minTemperature = parseInt($('#mintemperature').val())
            }
            if ($('#maxtemperature').val() !== "") {
            $('#message').text("You've changed your maximum temperature to " + $('#maxtemperature').val())
            thermostat.minTemperature = parseInt($('#mintemperature').val())
            }
            if ($('#maxtemperatureps').val() !== "") {
            $('#message').text("You've changed your power saver maximum temperature to " + $('#maxtemperatureps').val())
            thermostat.minTemperature = parseInt($('#mintemperature').val())
            }
        });

Answer 1

一种方法是：

$('#custom-values').on('submit', function(event) {
  event.preventDefault();
  // creating an object to define what setting is associated
  // with each element (identified by its id as the key):
  var messages = {
    'mintemperature' : 'minimum',
    'maxtemperature' : 'maximum',
    'maxtemperatureps' : 'maximum power-saving'
  },
  // creating an array, using map and get, of the nodes that have
  // had their values changed from the default, and whose value can
  // be parsed as a number (in base 10):
      changes = $(this).find('input[type="text"]').map(function () {
    if ( this.value !== this.defaultValue && parseInt(this.value, 10)) {
      return this;
    }
  }).get(),
  // creating an '<li>' element as a jQuery object:
      li = $('<li />'),
  // creating a variable to hold a clone within the (later) forEach:
      clone;
  // empty out existing messages:
  $('#messages').empty();
  // iterate over the array of changed nodes:
  changes.forEach(function (changed) {
    // cloning the created jQuery <li> object:
    clone = li.clone();
    // setting its html to the following concatenated string:
    clone.html('You have changed the ' + messages[changed.id] + ' temperature setting, to: ' + changed.value + '&deg;C')
    // appending the <li> to the '#messages' element:
    .appendTo('#messages');
  });
  
  
  
});

#messages {
  border: 1px solid #000;
  margin: 0.5em;
}
/* hiding the #messages element if it has
   no content (including white-space): */
#messages:empty {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="custom-values">
  <input type="text" id="mintemperature" placeholder="Minimum temperature">
  <input type="text" id="maxtemperature" placeholder="Maximum temperature">
  <input type="text" id="maxtemperatureps" placeholder="Max. PowerSaver temperature">
  <input type="submit" class="submit-button" value="Set!">
</form>
<ul id="messages"></ul>

参考文献：

Jquery if语句

1 个答案: