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

如何使用mouseenter img显示一个频道的信息，而不显示所有频道的所有信息。在我的代码中当我超过一个img时，显示所有频道的所有信息

Answer 1

尝试使用parents()方法，然后选择.info。

像这样：

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

Answer 2

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

问题是你的mouseenter / mouseout事件目标所有 .info divs ...你想只定位被鼠标悬停的元素的.info div。而不是

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

试

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

＆＃34; $（本）＆＃34;在此上下文中将引用触发事件的img。然后，您正在寻找该img及其.info div（parent（））的公共容器，然后从该容器中查找子项＆＃34; .info＆＃34;。

您还希望从隐藏的所有.info元素开始 - 这样做的最佳方式是通过CSS，因此页面加载时不会闪烁。

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

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

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

希望这有帮助！

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

2 个答案: