Question

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

    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（）事件”......然后当另一个输入框改变其值时....“Inch触发了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中，它有一个参数告诉它是否递归。代码是笨重的，但它应该让你大致了解一种方法来做你似乎要问的事情。

P.S。请务必添加一些验证，表明用户输入的内容实际上是一个数字。

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

3 个答案: