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

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>

我想要的是触发 alert() 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，它有一个参数来告诉它是否递归。原样的代码很笨拙，但它应该让您大致了解一种方法来完成您似乎在问的事情。

附：请务必添加一些验证，以确认用户输入的内容确实是一个数字。