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

1

修正を見つけました。jQuery セレクターの up を取り除き, thisます (これで何をすべきかわからないので、まったく何もしないと確信しています)。覚えておくと役立つヒントは、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 に答える