問題タブ [onmouseout]

onmouseover でブロック内に書かれたテキストを挿入したい。

私のHTMLソースコードは次のとおりです。

コメントの代わりにテキストを挿入するために、次の Javascript コードを書きました。

問題は、書かれたリンクです。この問題をどのように解決できますか? 私のコードは正しいですか？

[編集]: fiddleがどうなるかを確認するために css を追加しました。@Konstantin D-Infragistics のコード jquery を使用しましたが、同じ問題があります。マウスが書かれた「追加するテキスト」の上を通過すると点滅します。質問がより明確になったことを願っています

私のページには、startTimer と stopTimer 関数をそれぞれ実行する「タイマーの開始」ボタンまたは「タイマーの停止」ボタンのいずれかのボタンがいくつかあります。

startTimer 関数の間、ボタンの onclick は startTimer から stopTimer に変化し、その逆も同様です。

現時点では、ボタンをクリックすると、両方の機能が永続的に実行されます。

関数を実行してから、ボタンをもう一度クリックして反対の関数を実行できるように停止します。

私が検討してきたアプローチの 1 つは、ボタンの実行中にボタンを無効にし、関数に有効なボタンをチェックさせ、関数を実行してから、イベントを作成して再度有効にすることです。それは私が苦労している最後のビットです。

}

HTML/PHP:

I've made 4 rectangles in raphael.js using the for loop. When I apply events such as onmouseover or onmouseout it applies only to the last rectangle created. I know something is wrong in my code. Please provide a solution and is there a way to simplify the code?

JS Fiddle Link

onmouseoutイベントとonmouseoverイベントで色が変わるこのコードがあります。ただし、これらのボックス上でマウスを非常に高速に移動すると、マウスオーバー機能が正しく機能せず、色が変更されません。何が問題なのですか？

JSフィドルコード

*編集：マウスをすばやく動かしても、アニメーションが1つのボックスにのみ適用されるようにするにはどうすればよいですか。

この小さなスニペットの目的は、(デフォルトで) 画像データを表示してから、"slideDown" onMouseOver で削除することです。ほとんどの場合は機能しますが、テキストにカーソルを合わせると情報が表示されると、div が狂ったように上下にジャンプします。これを解決するための助けをいただければ幸いです。

デモ: http://jsfiddle.net/voudini/SggsV/

そこで、Flickr のような PHP サイトをセットアップしていますが、これらの写真は評価できます。そのため、ユーザーが星をクリックして写真を評価すると、写真の星が計算された新しい評価を反映するように、AJAX で評価システムを設定しています。(写真の評価は、黄色または空白の 10 個の星で表されます)。

星は、マウスオーバーすると、カーソルが指している場所に点灯するように反応します。星をクリックすると、対応する値が photo_rating テーブルに記録され、photo テーブルで更新されます。次に、新しく計算された評価が星に反映されます。

更新 ほとんどすべてが、この呼び出しが正しい評価を返さないことに要約されます。ページが読み込まれたときに、写真の元の評価が返されます。また、AJAX を介して DB に保存された新しい評価ではありません (DB の値は変更されていますが)。

ここに問題があります。クリックすると、新しく計算された正しい評価で星が更新されます。しかし、星の上にマウスを戻すと、マウスが外れます。星の評価は、ユーザーが最初にページを読み込んだときの元の評価に戻ります。したがって、反映されている評価は、ページが読み込まれたときにデータベースから取得されたものです。写真テーブルの評価列に現在存在する値ではありません。

もともと $photo->rating を使用していましたが、AJAX を使用したため、その値が再度計算されていないことがわかりました。そこで、onmouseout を切り替えて Photograph::find_by_id($_GET['id'])->rating; を呼び出しました。IDからデータベースをチェックし、現在の評価を取得することにより、新しいオブジェクトをインスタンス化する必要があります。しかし、これでも更新された値が得られないようです。

私はfirebug、firePHPを使用しており、プロファイリングを行って、これらのメソッドをクリックしてマウスオーバーしたときにこれらのメソッドに渡される値を正確に確認しています。何らかの理由で、ユーザーが投票した直後に、新しい評価が DB からのみ取得され、新しい値が表示されます。ただし、星の上にマウスを置いた後はいつでも、ページを読み込んだときの状態に戻ります. ページ全体を更新せずに、更新された値を以下のコードに反映させる方法はありますか? ページを更新すると機能しますが、ポイントはすべてAJAXを介して行うことでしたので、ページ全体をリロードする必要はありません...

これは、呼び出しがページに設定される方法です。

上記の onmouseactions で使用した 3 つを含む rating.js ファイルを次に示します (decision_rating と stars_current_rating は同じコードであることは理解していますが、ロジックが異なる別のページ用に設定したときは異なっていましたが、更新はうまくいかなかったので、この単純な例に戻りました)

データベースに2つのテーブルを設定しました。1 つは、user_id、photo_id、および rating を持つ photo_rating です。photo テーブルには、現在の評価の列もあります (これは、photo_rating の対応する行の平均として計算されます)。

以下は、AJAX が呼び出している set_rating.php ファイルです。

これらは、PhotoRating 内で呼び出されている関数です。

昨日遅くにこれをテストし始めて以来、私は机に頭をぶつけていました。ページをリロードするだけでよいことは理解していますが、これはすべて AJAX を介して行う効率を無効にしているように感じます。

I am building a mock Flickr site where you can rate the photos by clicking on 1-10 stars. When the page loads, it creates an object for the photo and sets its values based on the db entry corresponding to its id. When you hover over the stars they light up (from 1) to the number star your cursor is on, designating your rating. When you click a star it submits the rating (through AJAX) and updates the database, then sets the stars to reflect the new rating.

The problem is if you hover over stars then mouse off of them (without clicking on one) then the stars that are lit up reflect the rating the photo had when the page was initially loaded, and not what the rating currently is (based on the ratings that were logged using AJAX when the user clicks on a star).

The database is being updated, the stars reflect the right rating right after the AJAX call (since I call the same function at the end of the AJAX call as I do with onmouseout, stars_current_rating(rating)). The only difference is at the end of the AJAX call I am passing in the xmlhttp.responseText as the parameter. And in the onmouseout I pass in (what I am trying to have be) the most current rating in the database for that photo.

My logic behind this call is the assumption that I am getting the new rating that has been saved to the db by finding it and passing the new rating to stars_current_rating(...). The only problem is onmouseout passes the original rating parameter that was pulled from the db when the page loaded, and not the new value in the DB (which is what the find_by_id() sql function does)... Here is the code which handles the displaying of the stars.

Any help or insight would be appreciated for more details on the question click the link below for the original question.

Original Question with all the code and specific details

そのため、さまざまな状況でプレーンなツールチップを表示する必要があります。onclick イベントを使用して URL リンクのデフォルトの動作をキャンセルし、mouseover イベントでツールチップを表示し、mouseout イベントでツールチップを非表示にする必要があります。これまでに作成した HTML、CSS、および JavaScript コードをすべて含めます。これは、外部の JavaScript ファイルでのみ行う必要があります (つまり、HTML や CSS をまったく変更できません)。また、innerHTML も使用できません (JavaScript のベスト プラクティスを使用する必要があります)。私は自分の能力を最大限に発揮してコードを書こうとしました (私は JavaScript に本当に慣れていません)。現時点ではどの機能も動作しません。私は正確に3つの機能を持っている必要があり、それらはJavascriptで正しい方法で（私が思うに）レイアウトされています。わかりました、ここにコードがあります：

HTML

CSS

JavaScript

私には、手紙に従わなければならない課題があります。JavaScript コードの上部にあるコメントを読んで、この割り当てに関する制限を確認してください。ほとんどの機能は非常にうまくレイアウトされ、コメントが付けられていますが、ページが読み込まれると機能しません。HTML、CSS、JavaScript を含めました。あなたの提案が私の制限から外れないように、答えを出す前にJavaScriptの上部にあるコメントを読んでください。私がこれについてばかげているなら申し訳ありませんが、そうするつもりはありません。ご協力ありがとうございました。ありがとう、ジェイソン

ps 返される唯一のエラーは次のとおりです。

HTML

CSS

Javascript

* Javascript を更新 (コードのみ追加、コメントなし) *

私は JavaScript でいくつかの実験を行っており、4 つの項目のリストが水平方向に表示され、各リスト項目にはonmouseoverandonmouseoutイベントが割り当てられています。

各アイテムのonmouseoverイベントは、間隔を使用して時間の経過とともにアイテムの高さを増加させる関数を実行します。

各アイテムのoutmouseoverイベントは関数を実行し、別の間隔を使用して時間の経過とともにアイテムの高さをデフォルト値まで減らします。

次のシナリオで機能しています。onmouseoverリスト項目に対してトリガーすると、高さが期待どおりに増加し、リスト項目からマウスを離すと、高さが期待どおりに減少します。

ただし、問題は、次のシナリオでは機能しないようです。onmouseoverリスト項目に対してトリガーすると、高さが期待どおりに増加しますが、項目が元のサイズに戻る前onmouseoverに別のリスト項目に対して別のイベントをトリガーすると、前のリスト項目の関数の実行が終了していません。onmouseout

詳細が不足している場合は申し訳ありません。明らかに、私は物事を説明するのが非常に下手です....ソースコードへのリンクと、コードをテストして何が起こっているかを確認できるサイトがあります。

たぶん私は思ったほどJavaScriptの知識がないので、解決策や修正は素晴らしいですが、なぜこれが起こっているのかについてのアドバイスや何らかの説明を喜んで受け入れます.

最初は、複数のインターバル タイマーを同時に実行することはできないと考えていましたが、いくつかの調査の結果、実行できることがわかりました。だから今私はそれがonmouseoverとonmouseoutイベントの間の競合であるかどうかを考えています。

アドバイス、ガイダンス、または解決策をいただければ幸いです。

ソース: https://docs.google.com/open?id=0B6XLOOGyKVdWVkpSUklmMVI5QUk
テスト サイト: http://www.play-hookey.com/htmltest/
(その Google ドキュメントの内容をコピーして、html テキスト領域に貼り付けるだけです)サイトで私が話していることを確認してください）