时间戳

首页 > 解决方案 > 重力形式计算器间隔

wordpress - 重力形式计算器间隔

问题描述

我打算用重力形式制作一个计算器，但我不知道它是否可以做我想做的事。

人们应该可以计算草坪的价格。所以我有 1 个输入字段到平方米，然后我有 3 个其他字段添加到草坪。

但其他 4 个字段的价格取决于客户在字段中输入的平方米数。

因此，如果客户输入的面积在 1-25 平方米之间，则字段 1 成本 = 2 美元 字段 2 成本 = 6 美元 字段 3 成本 = 7 美元

但是如果客户随后在 26-40 之间输入，那么字段 1、2、3 应该花费另一个价格。这可能，没有人不这样。

感谢 ：）

标签： wordpresscalculator

解决方案

我将为您提供有关如何通过 Javascript 执行此操作的想法。我假设重力形式字段接受id属性。设id每个字段的属性为in_square, field_1, field_2, 和field_3

所以字段可能如下所示：

<input type="text" id="in_square" />

<input type="text" id="field_1" />

<input type="text" id="field_2" />

<input type="text" id="field_3" />

使用 Javascript，你可以尝试这样的事情：

jQuery(function($){

  $('#in_square').on('change keyup', function(){
    var in_square = parseInt( $('#in_square').val() ),  // read the input
        field_1 = '',
        field_2 = '',
        field_3 = '';

    // conditions
    if( in_square >= 1 && in_square <= 25 )
    {
      field_1 = '2 USD';
      field_2 = '6 USD';
      field_3 = '7 USD';
    }
    else if( in_square >= 26 && in_square <= 40 )
    {
      field_1 = '3 USD';
      field_2 = '8 USD';
      field_3 = '10 USD';
    }
    //... and goes on..

    // assign the values back to the fields
    $('#field_1').val( field_1 );
    $('#field_2').val( field_2 );
    $('#field_3').val( field_3 );
  });
    
});

这是小提琴：https ://jsfiddle.net/xpy58b49/

您可以使用wp_enqueue_script()来注入这个 Javascript 文件。

推荐阅读