Question

我有两个功能，我想合并为一个。是否可以结合......

$(document).ready(function () {
   $(".jobtype").change(function () {
      if ($("select[name='jobtype']").val() != "Low Budget") {
         // something happens
      }
   });
});

这......

$(document).ready(function () {
   $(document).on('keyup', function (evt) {
      if (evt.keyCode == 27) {
         // same thing happens
      }
   });
});

这样它们适用于change（）和keyup？

编辑：对不起，我在深夜写这篇文章，所以也许并没有正确地解释自己。

我有一个表格，当选项＆＃34;低预算＆＃34;从下拉选择列表中选择，运行一个函数来改变页面上的一堆东西。

然而，如果＆＃34;低预算＆＃34;取消选择选项，然后运行另一个脚本撤消更改并将页面返回到其原始格式。将此代码恢复为原始格式的代码可能长达30行。

如果用户按下ESC并关闭表单，我希望运行相同的代码。

将相同的函数写出两次似乎很奇怪，所以我想知道什么是正确和最有效的编码方式。我的一部分认为我可以在

之类的内容中编写30行代码

function doSomething() {
    // 30 lines of code
}

然后在两个事件中有：

$(document).ready(function () {
    $(".jobtype").change(function () {
        if ($("select[name='jobtype']").val() != "Low Budget") {
            doSomething();
        }
    });
});

和

$(document).ready(function () {
    $(".jobtype").change(function () {
        if ($("select[name='jobtype']").val() != "Low Budget") {
           doSomething();
        }
    });
});

但是我不确定构造代码的正确方法。

再次感谢

Answer 1

也许这个解决方案不够好，但您可以尝试：

$(document).ready(function() {
    $(".jobtype").change(function() {
        if ($("select[name='jobtype']").val() != "Low Budget") {
            common();              
        }
    });

    $(document).on('keyup',function(evt) {  
        if (evt.keyCode == 27) {
            common();
        }
    });

   function common() {
     alert('1111'); // some common logic
   }
});

Answer 2

也许在解决方案之下：

    var $documentEle =  $(document);
    var sameFunction = function(callback) {
        $documentEle.ready(function() {
            $(".jobtype").change(function() {
                if ($("select[name='jobtype']").val() != "Low Budget") {
                    callback()
                }
            });
            $documentEle.on('keyup', function(evt) {
                if (evt.keyCode == 27) {
                    callback()
                }
            });
        });
    }

  function callbackFunction () { //code}

   sameFunction(callbackFunction);

Answer 3

绝对有可能，但你的条件开始变得怪异。

我们让document通过传播处理所有关键事件，因此任何时候按ESC都会触发事件处理程序。

对于输入方面，我们检查它是实际元素（.jobtype）更改，否则更改其他元素也传播到document并触发。由于document无法自然发起change事件，因此效果不错。

DEMO

$(document).ready(function () {
  
  function myEventHandler (e) {
    var val = $("select[name='jobtype']").val();
    
    if (e.keyCode === 27 || 
        this === e.target && val === 'Low Budget') {
      // do something
      console.log('Did something...');
    }
  }
  
  
  $(document).on('keyup', myEventHandler);
  $('.jobtype').on('change', myEventHandler);
});

<select name="jobtype">
  <option value="nope">nope</option>
  <option value="Low Budget">Low Budget</option>
</select>

<input type="text" class="jobtype" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

我可能会建议反对这种模式。你想这样做是有原因的吗？可能有更好的解决方案。

Answer 4

由于＆＃39; Alex Looks So Sad的答案，我最终这样做了。

$(document).ready(function() {
    $(".jobtype").change(function() {
        if ($("select[name='jobtype']").val() != "Low Budget") {
            undoEgg();
        }

    $(document).on('keyup',function(evt) {  
        if (evt.keyCode == 27) {
            undoEgg();
        }
    });

    function undoEgg(){
        // 30 lines of code
    }
});

这非常适合我想要实现的目标，谢谢。

结合.change（）和keyup

4 个答案: