1

我正在努力提高我对 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());

});

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

4

2 回答 2

4

这里有两个问题：

  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);

  2. 您在每个回调中将不需要的上下文传递给您的 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

于 2013-07-23T16:29:37.133 回答
1

找到了修复。摆脱, thisjQuery 选择器中的 up （我很确定它不知道如何处理它，所以它根本不做任何事情。）要记住的一个有用的提示是 jQuery 使用 CSS 选择器语法尝试选择 jQuery 元素时，请像尝试将 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/

于 2013-07-23T16:29:05.677 回答