Javascript 如何向附加元素添加事件

这是我的代码：

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'});
     });
});
});

函数getChannelInfo（）{
变量名；
var状态；
var标志；
var博弈；
var url；channels.forEach（函数（通道）{
函数API（类型、名称）{
返回'https://api.twitch.tv/kraken/“+type+”/“+name+”？客户端id=pd57d4ktf8rjarn9q3qgtv4owbr5q0”；
};
$.getJSON（API（“流”，通道），函数（数据）{
if（data.stream！==null）{
name=data.stream.channel.display\u name；
状态=data.stream.channel.status；
logo=data.stream.channel.logo；
game=data.stream.channel.game；
url=data.stream.channel.url；
$（“”+name+“”+game+“”+status+“”）。附加到（“#channelsOn”）；
}否则{
$.getJSON（API（“通道”，通道），函数（data1）{
name=data1.display\u name；
地位=”；
logo=data1.logo；
游戏=”；
url=data1.url；
var newContent=$（“”+name+“”+game+“”+status+“”）。附录（“#channelsOff”）；
});
}
});
});
};
$（文档）.ready（函数（）{
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中显示一个频道的信息，而不显示所有频道的所有信息。在我的代码中，当im超过一个img时，所有频道的所有信息都会显示出来

尝试使用

parents（）

方法，然后选择

.info

像这样：

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

---

好吧，正如我在评论中所说的，您的代码有一些地方出了问题——但我会回到这里。首先，你的问题

问题是您的mouseenter/mouseout事件以所有.info div为目标。。。您只想将鼠标移动到元素的.info div作为目标。所以不是

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

试一试

本上下文中的“$（this）”将指触发事件的img。然后，您将查找该img及其.info div（parents（））的公共容器，然后从该容器中查找子“.info”

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

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

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

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

…//应该是
函数API（类型，名称）{//应该是var API=函数（类型，名称）{

---

希望这有帮助！

Hmmm-您的代码似乎有一些问题。我可以在回答中告诉您，但如果没有更多信息，我无法解决的一个问题是：“channels”变量集在哪里？它包含什么？@MacPrawn这些通道来自数组var channels=[“ESL_SC2”、“OgamingSC2”、“cretetion”、“freecodecamp”、“storbeck”、“habathcx”，“RobotCaleb”，“Noobs2nijas”]。

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

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