结合 .change() 和 keyup

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？

编辑：抱歉，我写这篇文章 post 真的是深夜，所以可能没有正确解释自己。

I have a form, that when the option "Low Budget" is selected from a drop down select list, that a function 运行s that changes a bunch页面上的内容。

但是，如果 "Low Budget" 选项被取消selected，那么另一个脚本运行会撤消更改并将页面 return 恢复为原始形式. return 原始形式的这段代码可能有 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

Maybe this solution is not good enough, but you can try:

$(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) 发生变化，否则改变其他元素将也传播到 [=12= 】并开火。由于 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

由于“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

Combining .change() and keyup

javascript

jquery

keyup