Question

当我将鼠标悬停在图标上时，我正试图在我的页面上显示一个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）和#weather上的绑定似乎有效。我在showWeather函数中添加了console.clear（），以便我可以通过控制台立即看到该函数是否正在执行。事实并非如此。

我在http://jsfiddle.net/a3fRM/2/

发布了一个JSFiddle

我看不出我在这里做错了什么。在我看来，两种绑定应该以完全相同的方式工作。

如果有人能看出出了什么问题，我真的很感激。

我意识到这可能是非常具体的，所以如果你必须这么接近问题，但至少要等到有人可以回答

Answer 1

你正在传递像目标一样的“jhbw”，然后使用$（target）.-＆gt; $（“jhbw”）与任何东西都不匹配。

使用类似：

var showWeather = function (target) {
    var div = $("div ."+target);
    console.clear();
    div.css("display", "block");
}

JQuery绑定mouseenter事件不执行函数

1 个答案: