Question

我正在开发一个项目，让鼠标移动它时让字体改变颜色。这是没有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插件时，它会像我预期的那样抛出异常＆＃39;]＆＃39;，我搜索了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>

当我将鼠标移到文本上时，它会改变颜色，但它只会改变为颜色数组中的第一个颜色，然后它会给我一个异常，因为＆＃34;预期＆＃39 ]＆＃39;＆＃34;

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

PS：我已经搜索了很多谷歌，但无法找到解决方案，任何反馈都会很感激，非常感谢。

Answer 1

您的问题是您将字符串传递给setTimeout（不鼓励）。当您将字符串传递给setTimeout时，超时时间结束时，它将eval字符串，而无法访问您的本地变量。由于传递给changeFontColor的匿名函数无法访问$，因此传递给setTimeout的字符串中的代码也无法访问它。

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

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

顺便说一句，如果您所做的只是each，则没有必要使用bind; bind已经绑定到jQuery对象中的每个元素。由于$(obj)已经是jQuery对象，因此也无需在changeFontColor中执行obj。

我的jquery插件抛出异常

1 个答案: