1

私のコードは次のようになります。

quickbarcolor = $("#quick-bar a").css("color");
$("#quick-bar a").hover(function () {
  if ($(this).css("color") != quickbarcolor) quickbarcolorhover = $(this).css("color");
 V$(this).animate({ color: quickbarcolorhover },400);
}, function() {
  $(this).animate({ 'color': quickbarcolor},400)}  
);

正常に動作しますが、hover() の 2 つの関数間で色を共有するのはグローバル変数に依存します。グローバル変数についてすべてを知っているわけではありませんが、関数間で値を共有することが目的であることは知っていますが、必要でない限り避ける方がよいと思いました。それでも、これを行うより良い方法を誰かが知っているかどうかを知りたいです。

4

4 に答える 4

5

data-*1 つのオプションは、属性を使用してアニメーション化されている DOM 要素に値を格納することです。これが私が意味することです：

$.data($("#quick-bar a"), "col", $("#quick-bar a").css("color"));

$("#quick-bar a").hover(function() {
    var self = $(this);
    var col = $.data(self, "col");
    if ($(this).css("color") != col) {
         $.data(self, "col", self.css("color"));
    }

    self.animate({
        color: col
    }, 400);

    $.data(self, "col", self.css("color");
}, function() {
    $(this).animate({
        'color':  $.data($(this), "col");
    }, 400)
});​
于 2012-12-01T14:44:21.503 に答える
4

このアプローチでは、グローバルは作成されません。

$(function() {
  var quickBar = $("#quick-bar a"),
      quickbarcolor = quickBar.css("color");

    quickBar.hover(function () {
        var $this = $(this), 
            color = $this.css("color");
        if ( color != quickbarcolor) {
             $this.animate({ color: color },400);
        }

    }, function() {
        $(this).animate({ 'color': quickbarcolor},400)}  
        );)
});
于 2012-12-01T14:50:27.850 に答える
1

または、JQuery データ API を使用します。

$(this).data("myCustomData", "Hi");
于 2012-12-01T14:48:58.490 に答える
0

データ属性は、firebug などのあらゆる種類の html デバッガーで編集できるため、良いことではありません。これは、誰でもコードの動作を変更できることを意味します (ロールオーバーは問題ありませんが、さらに考えてください...)

コードを追加するために dom ready イベントが発生するのを待つこともできますが、実行を高速化することはできません。したがって、私にとって最善の方法は、ロールオーバー宣言を匿名関数に入れることです。これは、html body タグの末尾にある script タグになります。また、jQuery がロードされる前に実行するのが怖い場合は、単純に defer 属性を使用できます ( caniuse.comの compat' ) 。

<html>
  <head>
    ...
    <script src="jquery.min.js" type="text/javascript" defer="defer"></script>
    ...
    </head>

  <body>
    ...
    <script type="text/javascript" defer="defer">
      (function()
      {
        var strictly_private_var = 1;
        /* do your rollover */

      })();

    </script>
  </body>
</html>
于 2012-12-01T15:00:27.057 に答える