javascript - jqueryのマウスオーバーイベントが機能しない

Question

dynamicdrive.comのShowHintスクリプトを使用して、Webサイトにフォームエラーを表示しようとしています。

現在、エラーは次のように表示されます

  <span class="error">Error Message</span>

入力の1つにエラーがある場合。

代わりにshowhintスクリプトを使用してこのエラーを表示したいので、エラーのあるすべてのページを置き換えて編集する必要があります

  <span class="error">Error Message</span>

と

    <span class="error erroranchor" onmouseover="showhint('Error Message Here', this, event, '200px')"></span>

手動で。

しかし、私はここでエネルギーを節約しようとしています。これが、代わりにJQueryを使用することにした理由です。クエリを使用するのは初めてで、これが私の最初のコーディングループになります。論理的な観点から、JQueryは一番。これが私がこれまでに行ったことですが、何も機能していません。

<script type='text/javascript'>
//On document ready.. I'm not sure if it should be document ready or document load.
    $(document).ready(function() {
//First i add the class "erroranchor" to <span class="error">
    $(".error").addClass("erroranchor");
//Then i've tried to convert the onmouseover event to JQuery mouseover event.
    $(".erroranchor").mouseover(showhint(){
//Here i try to get the "Error Message" from <span class="error">Error Message</span> so it can be displayed in the hint box.
        var $errortext = $(this);
        $errortext.text(),
        this.event,
        '200px'
    });
    });
</script>

次に、私が望むように完全に機能するCSSがあります。

.error {
    text-indent: -99999px;
}
.erroranchor {
    background: url(anchor.png);
}

上記のJavaScriptを改善していただければ幸いです（わかりやすくしてください）。

Answer 1

あなたのmouseover束縛は間違っています。そのはず

$(".erroranchor").mouseover(function(){...});

functionの代わりにあることに注意してくださいshowhint。

showhint()コード内の別の場所に独自の関数として関数を作成する場合、バインディングは次のようになります。

$(".erroranchor").mouseover(showhint);

編集
ごとに異なるエラー メッセージが必要な場合は、jQuery の機能'.erroranchor'を使用できます。data()

<span class="error erroranchor" data-errormessage="Error message here"></span>
<span class="error erroranchor" data-errormessage="Different error message here"></span>

次に、イベントハンドラと関数:

$(".erroranchor").mouseover(showhint);

function showhint() {
    var errMsg = $(this).data('errormessage');
    if(errMsg) {
        //do stuff
    }
}

Answer 2

これを試して

$(".erroranchor").mouseover(function(){
         showhint();
});