0

アイコンの上にカーソルを置いたときに、ページに表示する div を取得しようとしています。ただし、コードの完全な「システム」はもう少し複雑です...

シナリオ
ページの読み込み時に、ユーザーは自分の地域の現在の気象条件を示す小さなバーを表示します。ユーザーがこのバーにカーソルを合わせると、その下に大きな div が表示され、より詳細な予報と、国の他の地域の現在の気象条件を表すアイコンが表示されます。

ユーザーがこれらのアイコンにカーソルを合わせると、カーソルを合わせたアイコンによって表される地域のより詳細な天気予報が (またはツールチップとして) 表示されるはずです。

構造
Yahoo の天気 API で転送された HTML が見苦しいので、jquery を書き直して次のように出力しました。

<div id="weather">
    <div id="weather-feed">
        <div class="weather-conditions">Mostly Cloudy, 23 C</div>
        <div class="weather-icon">
            <img src="http://l.yimg.com/a/i/us/we/52/28.gif"><span>Pretoria</span>

        </div>
    </div>
    <div class="weather-more-button">+</div>
    <div class="weather-extra">
        <div class="weather-forecast">
            <p style="font-size: 13pt;"><b>Forcast for your area:</b>

            </p>Thu - Mostly Clear. High: 25 Low: 14
            <br>Fri - Mostly Sunny. High: 25 Low: 17
            <br>Sat - Mostly Sunny. High: 28 Low: 18
            <br>Sun - Sunny. High: 31 Low: 17
            <br>Mon - Sunny. High: 31 Low: 17
            <br>
            <br><a href="http://us.rd.yahoo.com/dailynews/rss/weather/Pretoria__SF/*http://weather.yahoo.com/forecast/SFXX0044_c.html">Full Forecast at Yahoo! Weather</a>

        </div>
        <table width="100%">
            <tbody>
                <tr>
                    <td align="center" width="33%">
                        <img class="jhb" src="http://l.yimg.com/a/i/us/we/52/3200.gif">
                    </td>
                    <td align="center" width="33%">
                        <img class="dbn" src="http://l.yimg.com/a/i/us/we/52/30.gif">
                    </td>
                    <td width="33%" align="center">
                        <img class="cpt" src="http://l.yimg.com/a/i/us/we/52/34.gif">
                    </td>
                </tr>
                <tr>
                    <td align="center">JHB</td>
                    <td align="center">DBN</td>
                    <td align="center">CPT</td>
                </tr>
            </tbody>
        </table>
        <div class="jhbw">
            <hr>
            <p style="font-size: 13pt;"><b>Forcast for Johannesburg:</b>

            </p>
            <br>Thu - Mostly Clear. High: 22 Low: 11
            <br>Fri - Mostly Sunny. High: 22 Low: 14
            <br>Sat - Mostly Sunny. High: 26 Low: 15
            <br>Sun - Sunny. High: 27 Low: 14
            <br>Mon - Sunny. High: 28 Low: 13
            <br>
            <br>
        </div>
    </div>
</div>

ここに表示されるすべての気象データは動的に生成されることに注意してください。

JQuery
ホバー イベントを容易にするために、jquery コード内の別の関数に関連付けられた mouseenter および mouseleave イベントとのバインディングを使用しました。

var showWeather = function (target) {
    var div = $(target);
    console.clear();
    div.css("display", "block");
}
var hideWeather = function (target) {
    var div = $(target);
    div.css("display", "none");
}
$("img.jhb").bind({
    mouseenter: function () { showWeather("jhbw") },
    mouseleave: function () { hideWeather("jhbw") }
});
var showExtra = function () {
    var extra = $(".weather-extra");
    extra.css("display", "block");
}

var hideExtra = function () {
    var extra = $(".weather-extra");
    extra.css("display", "none");
}

$("#weather").bind({
    mouseenter: showExtra,
    mouseleave: hideExtra
});

問題
現在、最後の機能 ( showExtra, hideExtra) と bind onのみが機能しているように#weather見えます。関数に console.clear() を追加してshowWeather、関数が実行されているかどうかをコンソールからすぐに確認できるようにしました。そうではありません。

http://jsfiddle.net/a3fRM/2/に JSFiddle を投稿しました。

ここで何が間違っていたのかわかりません。私の目には、両方のバインドがまったく同じように機能するはずです。

誰かが何がうまくいかなかったのかを見ることができれば、本当に感謝しています。

これはおそらく非常に具体的であることを認識しているため、必要に応じて質問を閉じますが、少なくとも誰かが答えられるように待ちます

4

1 に答える 1

0

ターゲットのように「jhbw」を渡し、次に $(target).-> $("jhbw") を使用して、何とも一致しません。

次のようなものを使用します。

var showWeather = function (target) {
    var div = $("div ."+target);
    console.clear();
    div.css("display", "block");
}
于 2013-03-14T14:29:56.717 に答える