javascript - 如何将事件添加到附加元素

Question

这是我的代码:

function getChannelInfo(){ 
var name;
    var status;
    var logo;
    var game;
    var url;channels.forEach(function(channel){
function API(type,name){
  return 'https://api.twitch.tv/kraken/'+type+'/'+name+'?client_id=pd57d4ktf8rjarn9q3qgtv4owbr5q0';
};
$.getJSON(API("streams",channel),function(data){
    if(data.stream!==null){
       name=data.stream.channel.display_name;
       status=data.stream.channel.status;
       logo=data.stream.channel.logo;
       game=data.stream.channel.game;
       url=data.stream.channel.url;
    $("<div class='col-md-3 text-center'><a class='link'href='"+url+"' target='_blank'><img class='active' src="+logo+"></a><divclass='info'><h1 id='name' class='name'>"+name+"</h1><h2 class='game'>"+game+"</h2><h3 class='status'>"+status+"</h3></div></div>").appendTo('#channelsOn');
        } else {
$.getJSON(API("channels",channel),function(data1){
       name=data1.display_name;
       status="";
       logo=data1.logo;
       game="";
       url=data1.url;
var newContent = $("<div class='col-md-3 text-center offline'><aclass='link' href='"+url+"' target='_blank'><img class='noactive' src="+logo+"></a><div class='info'><h1 class='name'>"+name+"</h1><h2 class='game'>"+game+"</h2><h3 class='status'>"+status+"</h3></div></div>").appendTo("#channelsOff");
});
       }
});
  });
};
$(document).ready(function(){
  getChannelInfo();
 $('#channelsOn').on('mouseenter','img',function() {
   $('.info').animate({opacity:'1'});
 });
   $('#channelsOn').on('mouseout','img',function() {
   $('.info').animate({opacity:'0'});
});
  $('#channelsOff').on('mouseenter','img',function() {
   $('.info').animate({opacity:'1'});
 });
   $('#channelsOff').on('mouseout','img',function() {
   $('.info').animate({opacity:'0'});
     });
});
});

我如何使用鼠标输入 img 显示一个 channel 的信息而不显示所有 channel 的所有信息。在我的代码中，当我超过一个 img 时，会显示所有 channel 的所有信息

Answer 1

好吧，正如我在评论中所说，您的代码存在一些问题 - 但我会回过头来讨论这个问题。首先，你的问题。

问题是您的 mouseenter/mouseout 事件以所有 .info div 为目标...您只想以被鼠标悬停的元素的 .info div 为目标。所以不是

$('.info').animate({opacity:'1'});

尝试

$(this).parents('.col-md-3.text-center').children('.info').animate({opacity:'1'});

“$(this)”在此上下文中指的是触发事件的 img。然后，您正在寻找该 img 及其 .info div (parents()) 的公共(public)容器，然后从该容器中找到子“.info”。

您还需要从隐藏所有 .info 元素开始 - 最好的方法是通过 css，这样页面加载时就不会闪烁。

最后，我注意到您代码中的一些错误:

...<divclass='info'>... // should be <div class='info'>

function API(type,name){ // should be var API = function(type,name){

希望这对您有所帮助!