Question

基本上，我想通过按钮功能更改textbox1的值时，例如textbox2上的值。我知道可以在按钮上包含该函数来更改textbox2上的值，但是我不希望那样。有可能吗？

这是我到目前为止在JSFiddle https://jsfiddle.net/xpvt214o/387300/

上尝试过的

HTML代码：

<button id="button1">button</button>
<input type="text" id="outputtext1" value="1" readonly/>
<input type="text" id="outputtext2" value="" />

JavaScript：

jQuery('#button1').on('click', function() {
    document.getElementById("outputtext1").value = parseInt(document.getElementById("outputtext1").value) +1;
});


jQuery('#outputtext1').on('change', function() {
    //I know that this logic can be put in onClick function above instead
    var number = document.getElementById("outputtext1").value;
    if( number <= 3){
        document.getElementById("outputtext2").value = "low";
    } else if (number < 10){
        document.getElementById("outputtext2").value = "medium";
    } else if (number >= 10){
        document.getElementById("outputtext2").value = "high";
    }
});

提前谢谢！

Answer 1

您可以在jQuery('#outputtext1').trigger("change");元素button事件中使用click。

示例：

jQuery('#button1').on('click', function() {
  document.getElementById("outputtext1").value = parseInt(document.getElementById("outputtext1").value) + 1;
  jQuery('#outputtext1').trigger("change");
});


jQuery('#outputtext1').on('change', function() {
  var number = document.getElementById("outputtext1").value;
  if (number <= 3) {
    document.getElementById("outputtext2").value = "low";
  } else if (number < 10) {
    document.getElementById("outputtext2").value = "medium";
  } else if (number >= 10) {
    document.getElementById("outputtext2").value = "high";
  }
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1">button</button>
<input type="text" id="outputtext1" value="1" readonly/>
<input type="text" id="outputtext2" value="" />

Answer 2

尝试以下操作：更改outputtext1的值并在其上触发更改事件

jQuery('#button1').on('click', function() {
    var value = jQuery("#outputtext1").val();
    value = (parseInt(value) || 0) + 1;
    jQuery("#outputtext1").val(value).change();
});


jQuery('#outputtext1').on('change', function() {
    var number = (parseInt($(this).val()) || 0) + 1;
    if( number <= 3){
        jQuery("#outputtext2").val("low");
    } else if (number < 10){
        jQuery("#outputtext2").val("medium");
    } else if (number >= 10){
        jQuery("#outputtext2").val("high");
    }
});

JSFiddle
注意：您可以使用jQuery id选择器和'.va（）`函数来代替Javacript，如上面的代码所示。

Answer 3

您可以在点击按钮时使用$('#outputtext1').trigger("change")

演示

$('#button1').on('click', function() {
  $('#outputtext1').val(+$('#outputtext1').val()+1);
  $('#outputtext1').trigger("change");
});


$('#outputtext1').on('change', function() {
  var number = document.getElementById("outputtext1").value;
  if (number <= 3) {
    document.getElementById("outputtext2").value = "low";
  } else if (number < 10) {
    document.getElementById("outputtext2").value = "medium";
  } else if (number >= 10) {
    document.getElementById("outputtext2").value = "high";
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1">button</button>
<input type="text" id="outputtext1" value="1" readonly/>
<input type="text" id="outputtext2" value="" />

Answer 4

您可以触发change事件或创建通用函数，然后在click和change事件上调用它。最好先调用泛型函数，而不要从事件中触发事件。

// find elements
var banner = $("#banner-message")
var button = $("button")

$('#button1').on('click', function() {
    document.getElementById("outputtext1").value = parseInt(document.getElementById("outputtext1").value) + 1;
    $('#outputtext1').trigger('change');
});


$('#outputtext1').on('change', function() {
    var number = document.getElementById("outputtext1").value;
    if (number <= 3) {
        document.getElementById("outputtext2").value = "low";
    } else if (number < 10) {
        document.getElementById("outputtext2").value = "medium";
    } else if (number >= 10) {
        document.getElementById("outputtext2").value = "high";
    }
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1">button</button>
<input type="text" id="outputtext1" value="1" />
<input type="text" id="outputtext2" value="" />
<!-- this should be changed when the value of outputtext1 is changing -->

// find elements
var banner = $("#banner-message")
var button = $("button")

$('#button1').on('click', function() {
    document.getElementById("outputtext1").value = parseInt(document.getElementById("outputtext1").value) + 1;
    validateInput();
});


$('#outputtext1').on('change', function() {
    validateInput();
});

function validateInput() {
    var number = document.getElementById("outputtext1").value;
    if (number <= 3) {
        document.getElementById("outputtext2").value = "low";
    } else if (number < 10) {
        document.getElementById("outputtext2").value = "medium";
    } else if (number >= 10) {
        document.getElementById("outputtext2").value = "high";
    }
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1">button</button>
<input type="text" id="outputtext1" value="1" />
<input type="text" id="outputtext2" value="" />
<!-- this should be changed when the value of outputtext1 is changing -->

Answer 5

try this fiddle

我正在使用$（'＃outputtext1'）。attr（'value'）获取选择器属性值，这样它就不会在运行时中断并更改值[请检查DOM中的值]。同时，我在单击按钮时触发更改事件。

jQuery('#button1').on('click', function() {
   var x = $('#outputtext1').attr('value');
   x  = parseInt(x) +1;
   $('#outputtext1').attr("value", x);
   jQuery('#outputtext1').trigger("change");
});

jQuery('#outputtext1').on('change', function() {
    var number = $('#outputtext1').attr('value');
    if( number <= 3){
    	document.getElementById("outputtext2").value = "low";
    } else if (number < 10){
    	document.getElementById("outputtext2").value = "medium";
    } else if (number >= 10){
    	document.getElementById("outputtext2").value = "high";
    }
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1">button</button>
<input type="text" id="outputtext1" value="1" />
<input type="text" id="outputtext2" value="" />

文本框上的jQuery更改事件

5 个答案: