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（）也可以......有点儿。如果我使用：

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);
    });
});

选择的第一个单选按钮不返回任何内容。它实际上是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”单选按钮并且选择值不等于“Square Footage | 0”，我只需要触发更改功能。没有运气我正在尝试：

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

Answer 1

我不知道如何提出这个答案，因为有很多事情需要解决。让我们一次一行，以下注释基于问题中提供的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>

Answer 2

您应该将所有元素都放在同一个类中并以这种方式绑定它们。

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>

使用jQuery获取任何变量的输入值

2 个答案: