需要有关两个输入框上的更改事件的帮助

Question

我需要这方面的帮助....我想触发警报（），例如在两个输入框上的更改事件之后执行一些代码....这是我的代码..

    Millimeter: <input type="text" id="millimeter" class="filter"/>
    Inch: <input type="text" id="inch" class="filter"/>

<script type="text/javascript">
    $(document).ready(function(){

        $(".filter").change(function(){
            var value = this.value;
            var id = this.id;
            var convert = "";

            switch(id)
            {
                case "millimeter":
                    convert = (value / 25.4).toFixed(2); //converts the value of input(mm) to inch;
                    $("#inch").val(convert).change();
                    break;

                case "inch":
                    convert = (value * 25.4).toFixed(2); //converts the value of input(inch) to mm;
                    $("#millimeter").val(convert).change();
                    break;

                default:
                    alert('no input has been changed');
            }

            alert(id+" triggered the change() event");
            //some code here....
        });
    });
</script>

我想要的是触发警报（ ) 2 两次...结果看起来像这样...“毫米触发了change()事件”...然后当另一个输入框改变其值时...“英寸触发了change()事件“...反之亦然...我是 javascript 和 jquery 的新手...任何帮助将不胜感激..

Answer 1

您的代码的问题在于，在第一个文本框的更改事件中，您触发了第二个文本框的更改事件，从而进入无限循环。您应该仅使用以下：

$("#inch").val(convert);

和：

$("#millimeter").val(convert);

来设置其他字段的值，但不会再次触发更改。

Answer 2

在 jsFiddle 上运行脚本时出现“超出最大调用堆栈大小”错误。这是因为您在其内部调用 .change() 函数。我把它删除了，效果很好。

小提琴：http://jsfiddle.net/EwdLs/

$(".filter").change(function() {
    var value = this.value;
    var id = this.id;
    var convert = "";

    switch (id) {
    case "millimeter":
        convert = (value / 25.4).toFixed(2); //converts the value of input(mm) to inch;
        $("#inch").val(convert);
        break;

    case "inch":
        convert = (value * 25.4).toFixed(2); //converts the value of input(inch) to mm;
        $("#millimeter").val(convert);
        break;

    default:
        alert('no input has been changed');
    }

    alert(id + " triggered the change() event");
    //some code here....
});

Answer 3

如果您希望每个输入的更改也触发其他输入的更改，但又不想陷入无限循环，请尝试以下一些变体：

$(document).ready(function(){
   function applyChange(el, changeOther) {
      var value = el.value;
      var id = el.id;
      var convert,
          other = "";

      if (changeOther) {
         switch(id) {
             case "millimeter":
                convert = (value / 25.4).toFixed(2);
                other = "#inch";
             break;

             case "inch":
                convert = (value * 25.4).toFixed(2);
                other = "#millimeter";
                break;

             default:
                alert('no input has been changed');
                break;
         }

         if (other != "") {
            $(other).val(convert);
            applyChange($(other)[0], false);
         }
      }
      alert(id+" triggered the change() event");
      //some code here....
   }

   $(".filter").change(function(){
      applyChange(this, true);
   });
});

如果不明显，我基本上采用了现有的更改处理程序并将其放入一个新函数 applyChange，它有一个参数来告诉它是否递归。代码本身很笨重，但它应该为您提供一种完成您似乎要求的操作的方法的总体思路。

PS 请务必添加一些验证，以确保用户输入的确实是一个数字。