0

我正在做一个项目，让字体在将鼠标移到它上面时改变它的颜色。这是没有jquery插件的版本：这是html代码部分：

<div><a href="#" style="color:#000000;text-decoration:none;font-size:20px;" id="myFontDaemon"><strong>my web link places here</strong></a></div>

这是javascript部分：

    var tColorTimer;
    var myColorCollection = ["#FF6682", "#26FF51", "#263FFF", "#FF16B1", "#FFB135", "#C2B5FF","#000000"];

    //bind event
    function changeFontColorWhenHover() {
        $("#myFont").bind("mouseover", function () {
            changeFontColor(0);
        });
    }

    //change font color
    function changeFontColor(m) {
        var colorValue = myColorCollection[m];
        $("#myFont").css("color", colorValue);
        if (m < 7) {
            tColorTimer = setTimeout('changeFontColor(' + (m + 1) + ')', 100);
        }
    }

    //init bind
    $(document).ready(function () {
        changeFontColorWhenHover();
    });

以上代码正常工作。但是当我将它们变成一个示例 jquery 插件时，它按预期抛出异常']'，我搜索了 jquery 插件很多但找不到我错过的东西。这是jquery插件部分：

    (function ($) {
    $.fn.fontdaemon = function () {
    this.each(function () {
        $(this).bind("mouseover", function () { // onmouseover event is raised
            changeFontColor($(this), 0);
        });
    });
    };

    var tColorTimer;

    var myColorCollection = ["#FF6682", "#26FF51", "#263FFF", 
    "#FF16B1", "#FFB135", "#C2B5FF", "#000000"];
function changeFontColor(obj, m) {
    var colorValue = myColorCollection[m];
    alert(m + "--" + colorValue);
    $(obj).css("color", colorValue);

    if (m < 7) {
        tColorTimer = setTimeout('changeFontColor(' + obj + "," + (m + 1) + ')', 50);
    }
    alert(m + "--" + colorValue);
};
})(jQuery);

然后我使用下面的代码来调用它：

<script src="fontdaemon.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#myFontDaemon").fontdaemon();
    });
</script>

当我将鼠标移到文本上时，它会改变它的颜色，但它只会改变为颜色数组中的第一个颜色，然后它会给我一个异常“预期']'”。

任何人都可以帮助我吗？谢谢。

PS：我google了很多，没找到解决办法，如有任何反馈，将不胜感激，再次非常感谢。

4

1 回答 1

1

您的问题是您将字符串传递给setTimeout（不鼓励）。当您将字符串传递给setTimeout时，当超时已过时，它将eval在不访问您的局部变量的情况下将该字符串。由于changeFontColor无法从传递给的匿名函数中访问，因此$传递给的字符串中的代码setTimeout也无法访问它。

解决方案是将匿名函数传递给setTimeout：

setTimeout(function() { changeFontColor(obj, m + 1); }, 50);

顺便说一句，each如果您正在做的只是binding，则没有必要使用；bind已经绑定到 jQuery 对象中的每个元素。因为已经是一个 jQuery 对象$(obj)，所以也没有必要这样做。changeFontColorobj

于 2013-01-07T05:14:07.740 回答