jQuery悬停显示多个弹出窗口？

Question

我试图在 jquery 中使用悬停来显示一个弹出窗口，但是当我将鼠标悬停在一个元素上时，它会显示多个弹出窗口，当我从元素上移开鼠标时，弹出窗口仍然存在。这是代码-

var channels = ["freecodecamp", "storbeck", "goldglove", "terakilobyte", "beohoff", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "syndicate", "riotgames", "comster404", "test_channel", "cretetion", "sheevergaming", "TR7K", "OgamingSC2", "syndicate"];

$(document).ready(function() {
  getChannels();

});

function getChannels() {
  channels.forEach(function(channel) {
    $.getJSON('https://api.twitch.tv/kraken/streams/' + channel + '?callback=?', function(data) {
      if (data.stream === null) {
        html = '<div class="row"><div class="col-md-3"><a href=https://api.twitch.tv/kraken/channels/' + channel + ' class="result" id="' + channel + '">' + channel + '</a></div><div class="col-md-3">Offline</div></div>';
      } else if (data.stream === undefined) {
        html = '<div class="row"><div class="col-md-3"><a href=https://api.twitch.tv/kraken/channels/' + channel + ' class="result" id="' + channel + '">' + channel + '</a></div><div class="col-md-3">Not Available</div></div>';
      } else {
        html = '<div class="row"><div class="col-md-3"><a href=https://api.twitch.tv/kraken/channels/' + channel + ' class="result" id="' + channel + '">' + channel + '</a></div><div class="col-md-3">Online</div></div>';
      }
      $("#list").append(html);
      $(".result").hover(function() {
        var x = $(this).attr('id');
        var y = "#" + x;
        $.getJSON('https://api.twitch.tv/kraken/channels/' + x + '?callback=?', function(info) {
          console.log(x);
          detail = '<div id="detail"><img src="' + info.logo + '" class="logo"><p>Language:' + info.language + '</p><p>Mature Content:' + info.mature + '</p><p>Title:' + info.game + '-' + info.status + '</p></div>';
          $(y).append(detail);
        });
      }, function() {
        $("#detail").remove();
      });
    });
  });
}

我无法在这里找出问题所在。请帮忙。

Answer 1

您只需添加一次事件处理程序，而不是在一个循环中多次添加。
为此，您可以委托。

我还清理了您的代码，摆脱了 HTML 字符串，并使用 jQuery 创建元素等。

var channels = ["freecodecamp", "storbeck", "goldglove", "terakilobyte", "beohoff", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "syndicate", "riotgames", "comster404", "test_channel", "cretetion", "sheevergaming", "TR7K", "OgamingSC2", "syndicate"];

$(document).ready(function() {
    $('#list').on({
        mouseenter: function() {
            var self = this;

            $.getJSON('https://api.twitch.tv/kraken/channels/' + x + '?callback=?', function(info) {
                var detail = $('<div />', {
                        id: 'detail'
                    }),
                    image = $('<img />', {
                        src: info.logo,
                        'class': 'logo'
                    }),
                    p1 = $('<p />', {
                        text: 'Language:' + info.language
                    }),
                    p2 = $('<p />', {
                        text: 'Mature Content:' + info.mature
                    }),
                    p3 = $('<p />', {
                        text: 'Title:' + info.game + '-' + info.status
                    });

                $(self).append(detail.append(image, p1, p2, p3))
            });
        },
        mouseleave: function() {
            $("#detail").remove();
        }
    }, '.result');

    channels.forEach(function(channel) {
        $.getJSON('https://api.twitch.tv/kraken/streams/' + channel + '?callback=?', function(data) {
            var text = data.stream === null ? 'Offline' : data.stream === undefined ? 'Not Available' : 'Online';

            var row = $('<div />', {
                    'class': 'row'
                }),
                col = $('<div />', {
                    'class': 'col-md-3'
                }),
                a = $('<a />', {
                    'class': 'result',
                    href: 'https://api.twitch.tv/kraken/channels/' + channel,
                    id: channel,
                    text: channel
                });

            $("#list").append(row.append(col.append(a)));
        });
    });
});