はどのように追加要素

Question

にイベントを追加するには、これは私のコードです：私はすべてのチャンネルからすべての情報を示すことなく、MouseEnterイベントIMGと1つのチャネルの情報を表示することができますどのように

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

。私のコードでは、1つのim以上のim、すべてのチャネルのすべての情報が表示されます

Answer 1

すべての権利、私は私のコメントで述べたように、いくつかのことは、あなたのコードで間違っている - しかし、私はこれに戻ってきます。まず、あなたの質問。

mouseenter/mouseoutイベントターゲットすべて .info divs ...マウスオーバーしている要素の.info divのみをターゲットにしたいとします。だからではなく、

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

のイベントをトリガし、IMGを参照します。この文脈で

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

"$（この）" を試してみてください。そのimgとその.info div、（parents（））の共通コンテナを探して、そのコンテナからchild ".info"を探します。

また、すべての.info要素を非表示にしておくこともできます。これを行うにはCSSを使用するのが最善の方法で、ページが読み込まれたときに点滅することはありません。

は最後に、私は気づいたあなたのコード内のいくつかのミス：

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

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

は、この情報がお役に立てば幸い！

Answer 2

.infoメソッドを使用して選択してください。このよう

：

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