用jQuery获取任意变量的输入值

Question

我有一个表单，如果某个输入被更改，我需要执行一个操作。在我的jQuery中，我将三个输入字段设置为不同的变量，例如：

var workOrderInput = jQuery(".work-order-select input");
var eventSchedulerInput = jQuery(".event-scheduler .gchoice_2_13_0 #choice_2_13_0");
var eventSchedulerSelect = jQuery(".event-scheduler select");

为了找出输入是否发生了变化，我使用：

jQuery([workOrderInput, eventSchedulerInput, eventSchedulerSelect]).each(function() {
    jQuery(this).change(function() {

    });
});

如果其中一个输入字段发生变化，我希望将一个变量设置为隐藏输入字段的值。

jQuery([workOrderInput, eventSchedulerInput, eventSchedulerSelect]).each(function() {
    jQuery(this).change(function() {
        var totalCost = jQuery(".signup-cost #field_2_22 #input_2_22").val();
        console.log(totalCost);
    });
});

现在，只在第二次单击时设置totalCost变量。例如，如果我单击“..work order-select input”，什么都不会发生。只有当我单击另一个输入时，变量才会被设置并显示在控制台中。

编辑:这是我的HTML

<form>
    <div class="work-order-select">
        <input type="radio" name="wo1" value="14.99">
        <input type="radio" name="wo2" value="24.99">
        <input type="radio" name="wo2" value="34.99">
    </div>
    <div class="event-scheduler">
        <input type="radio" name="es1" value="44.99">
        <select name="es1" >
            <option value="Square Footage|0">Square Footage</option>
            <option value="Under 50,000($29.00/mt)|29">Under 50,000($29.00/mt)</option
            <option value="Under 75,000($49.00/mt)|49">Under 75,000($49.00/mt)</option>
            <option value="Under 100,000($59.00/mt)|59">Under 100,000($59.00/mt)</option>      
        </select>
    <div>
    <div>
        <span class="total"></span>
        <input type="hidden" id="input_2_22" value="49.99">
    </div>
</form>

现在，一旦选择了其中一个单选按钮，或者下拉菜单发生了更改，#input_2_22的输入值就会被更新。

使用mouseup()也是works...kind of。如果我用：

jQuery([workOrderInput, eventSchedulerInput, eventSchedulerSelect]).each(function() {
    jQuery(this).mouseup(function() {
        var totalCost = jQuery(".signup-cost #field_2_22 #input_2_22").val();
        console.log(totalCost);
    });
}); 

第一个单选按钮select没有返回任何内容。这实际上是Chrome的网页检查器中的空行。第二次单击单选按钮时，将显示我单击的前一个单选按钮的值。

编辑2:以上所有内容均以下列方式固定：

jQuery("#choice_2_13_0, #choice_2_10_0, #choice_2_10_1, #choice_2_10_2").addClass("discount-class");

jQuery(".discount-class").change(function() {
    setTimeout(function() {
        var totalCost = jQuery(".signup-cost #input_2_22").val();
        var totalDiscount = (totalCost * .2).toFixed(2);
        var afterDiscount = (totalCost - totalDiscount).toFixed(2);
        console.log(totalDiscount);
        jQuery("#input_2_23").val(totalDiscount);
    }, 1000);
});

现在，如果选择了"wo“单选按钮中的一个，并且选择值不等于”平方片段\0“，我只需要使用更改函数来触发。幸运的是，我正在努力：

if (jQuery(".discount-class").is(':checked') && jQuery("#input_2_14").val != 'Square Footage|0') {

Answer 1

您可能应该赋予所有元素相同的类，并以这种方式绑定到它们。

​

jQuery('.myElements').change(function() {
  if (jQuery('#es1').val() != "Square Footage|0") {
    setTimeout(function() {
      var totalCost = jQuery("#input_2_22").val();
      jQuery('#test').append(totalCost + '<br>')
      console.log(totalCost);
    }, 1000);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="work-order-select">
    <input type="radio" class="myElements" name="wo1" value="14.99">
    <input type="radio" class="myElements" name="wo2" value="24.99">
    <input type="radio" class="myElements" name="wo2" value="34.99">
  </div>
  <div class="event-scheduler">
    <input type="radio" class="myElements" name="es1" value="44.99">
    <select name="es1" id="es1" class="myElements">
      <option value="Square Footage|0">Square Footage</option>
      <option value="Under 50,000($29.00/mt)|29">Under 50,000($29.00/mt)</option <option value="Under 75,000($49.00/mt)|49">Under 75,000($49.00/mt)</option>
      <option value="Under 100,000($59.00/mt)|59">Under 100,000($59.00/mt)</option>
    </select>
    <div>
      <div>
        <span class="total"></span>
        <input type="hidden" id="input_2_22" value="49.99">
      </div>
</form>

<div id="test"></div>

​

Answer 2

我不知道如何提出这个答案，因为有许多问题需要解决。让我们一次只看一行，下面的注释是基于问题中提供的HTML。

// this matches the first three radio buttons
var workOrderInput = jQuery(".work-order-select input");
// this does not match anything
var eventSchedulerInput = jQuery(".event-scheduler .gchoice_2_13_0 #choice_2_13_0");
// this matches the dropdown
var eventSchedulerSelect = jQuery(".event-scheduler select");

jQuery([workOrderInput, eventSchedulerInput, eventSchedulerSelect]).each(function() {
    jQuery(this).mouseup(function() {
        // this selector does not match anything either
        var totalCost = jQuery(".signup-cost #field_2_22 #input_2_22").val();
        console.log(totalCost);
    });
}); 

下面是一个FIDDLE，它说明了上面提出的要点。

现在允许应用我们所学到的内容，并修复一些事情。

​

jQuery(function ($) {
        // match radio buttons that are children of an element with the class "work-order-select"
    var workOrderInput = $(".work-order-select input[type=radio]"),
        // match radio buttons that are children of an element with the class "event-scheduler"
        eventSchedulerInput = $(".event-scheduler input[type=radio]"),
        // match a select element that is the child of an element with the class "event-scheduler"
        eventSchedulerSelect = $(".event-scheduler select"),
        // get one element with the id "input_2_22"
        hiddenInput = $("#input_2_22");

    $([workOrderInput, eventSchedulerInput, eventSchedulerSelect]).each(function() {
        this.on('change', function() {
            // get the value of the hidden element
            var totalCost = hiddenInput.val();
            // do something with it.
            alert(totalCost);
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
    <div class="work-order-select" style="border:1px solid black">.work-order-select input[type=radio]
        <br />
        <input type="radio" name="wo1" value="14.99" />
        <br />These two radio buttons have a different name
        <input type="radio" name="wo2" value="24.99" />
        <input type="radio" name="wo2" value="34.99" />
    </div>
    <br />
    <div class="event-scheduler">
        <div style="border:1px solid black">.event-scheduler input[type=radio]
            <input type="radio" name="radio-es1" value="44.99" />
        </div>
        <br />
        <div style="border:1px solid black">.event-scheduler select
        
        <select name="select-es1">
            <option value="Square Footage|0">Square Footage</option>
            <option value="Under 50,000($29.00/mt)|29">Under 50,000($29.00/mt)</option>
            <option value="Under 75,000($49.00/mt)|49">Under 75,000($49.00/mt)</option>
            <option value="Under 100,000($59.00/mt)|59">Under 100,000($59.00/mt)</option>
        </select>
        </div>
        <div>
            <div> <span class="total"></span>
                <input type="hidden" id="input_2_22" value="49.99" />
            </div>
        </div>
    </div>
</form>

​