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>

マウスをテキストの上に移動すると、色が変更されますが、色配列の最初の色にのみ変更され、「Expected']'」として例外がスローされます。

誰でも私を助けることができますか？どうも。

PS：私はグーグルをたくさん検索しましたが、解決策を見つけることができません。フィードバックをいただければ幸いです。ありがとうございました。

4

1 に答える 1

1

あなたの問題は、文字列を渡していることですsetTimeout(これはお勧めできません)。に文字列を渡すとsetTimeout、タイムアウトが経過するとeval、ローカル変数へのアクセスなしで文字列になります。changeFontColorに渡された無名関数からアクセスできないため$、 に渡された文字列内のコードsetTimeoutもそれにアクセスできません。

解決策は、無名関数を に渡すことsetTimeoutです。

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

ところで、eachあなたがしていることすべてがbinding である場合は、使用する必要はありません。bindjQuery オブジェクトの各要素に既にバインドされています。はすでに jQuery オブジェクトであるため、実行$(obj)する必要もありません。changeFontColorobj

于 2013-01-07T05:14:07.740 に答える