Question

我正在努力提高我对javascript / jQuery函数模式的理解。我一直在玩这个简单的演示，试图让一个有启发性的模块模式工作。

有谁能帮助我理解为什么这不起作用？我知道实际上你只会使用CSS来解决它，而且还有其他方法可以解决它 - 我感兴趣的是为什么我的尝试解决方案不起作用。

HTML

<body>

<p>Here is a test input element</p>
<form>
    <label>Some label</label>
        <input type="text">
        <button>Click me</button>
</form>

</body>

</html>

jQuery的：

$(document).ready(function(){

var roll = (function(){     
      function rollEnter(){
      $("button", this).css("text-decoration", "underline");
      }     
      function rollExit(){
      $("button", this).css("text-decoration", "none");
      }     
    return{
    underlined: rollEnter,
    standard: rollExit
    };
})();


//When I try and call the functions, it doesn't work
    $("button").on('mouseenter', roll.underlined());
    $("button").on('mouseleave', roll.standard());

}）;

关于出了什么问题/如何使这种模式运作的任何建议？

Answer 1

这里有两个问题：

您正在事件处理程序中调用回调函数，而不是允许事件处理程序调用它们。

// roll.underlined is invoked immediately
$("button").on('mouseenter', roll.underlined());
// roll.underlined is invoked when button emits the 'mousenter' event
$("button").on('mouseenter', roll.underlined);

您正在向每个回调中的jQuery选择器传递一个不需要的上下文

// nonworking: no need for "this"
function rollEnter(){
  $("button", this).css("color", "red");
} 
// working 
function rollEnter(){
  $(this).css("color", "red"); // $(this) is element event was triggered on
}

jsbin

Answer 2

找到修复程序。摆脱jQuery选择器中的, this（我很确定它不知道如何处理这个，所以它根本不做任何事情。）一个有用的提示记住，jQuery在尝试选择jQuery元素时使用CSS选择器语法，所以写一下就好像你试图将CSS应用到它（在这种情况下是一个按钮）

同样删除底部的括号，因为在方法旁边加上括号会告诉代码立即调用它。

$(document).ready(function(){

var roll = (function(){     
      function rollEnter(){
      //removed ", this"
      $("button").css("text-decoration", "underline");
      }     
      function rollExit(){
      $("button").css("text-decoration", "none");
      }     
    return{
    underlined: rollEnter,
    standard: rollExit
    };
})();


    $("button").on('mouseenter', roll.underlined); //<-- () removed
    $("button").on('mouseleave', roll.standard);   //
});

http://jsfiddle.net/V78Dm/

Javascript / jQuery编码模式建议

2 个答案: