Question

var myjson;
$.getJSON("http://www.pvpallday.com/api/others.json", function(json){
    myjson = json;
});
$.each(myjson, function (key, val) {

  var username = val.username;
  var logo = val.avatar;
  var displayName = val.displayname;
  var game = val.game;
  var streamurl = val.url;
  var service = val.service;

  if (service === 'twitch') {
    var serv = "Twitch";
  }
  else if (service === 'hitbox') {
    var server = "Hitbox";
  }

  if (logo == null) {
    var logo = "images/pava.jpg";
  }

  var bio = val.bio;
  if (bio === null) {
    bio = displayName+" is a PvP All Day Supported Streamer.";
  }

  var status = val.status;
  if (status == null) {
    status = displayName+" on "+serv;
  }

  var facebook = val.facebook;
  var twitter = val.twitter;
  var youtube = val.youtube;

  if ( facebook !== null || facebook !== "" ) {
    var facebookST = "&nbsp;&nbsp;<a class='facebookbot' href'//www.facebook.com/"+facebook+"' target='_blank'><i class='fa fa-facebook-official'></i></a>";
  }
  if ( twitter !== null || facebook !== "" ) {
    var twitterST = "<a class='twitterbot' href='//www.twitter.com/'"+twitter+"' target='_blank'><i class='fa fa-twitter'></i></a>";
  }
  if ( youtube !== null || youtube !== "" ) {
    var youtubeST = "&nbsp;&nbsp;<a class='youtubebot' href'//www.youtube.com/c/"+youtube+"' target='_blank'><i class='fa fa-youtube-play'></i></a>";
  }

  if ( service === 'hitbox' ) {
    $(document).ready(function(){
      $("li#"+username).click(function(){
        $("div#replace").hide().html("<div id='streamer'><iframe width='735' height='448' src='//www.hitbox.tv/embed/"+username+"?autoplay=true' frameborder='0' allowfullscreen></iframe></object></div><div class='description'><div id='prevlogo'><img src='"+logo+"' width='36px' height='36px' /></div><div id='who'><p id='theirname'><a href='"+streamurl+"' target='_blank'>"+displayName+"</a></p><p id='theirgame'>playing "+game+"</p></div><div class='clear'></div><div class='streamtitle'>"+status+"</div><div class='streambio'><div class='biotit'>Stream Description</div>"+bio+"<br /><br /><br /><a href='"+streamurl+"' target='_blank'>Check out "+displayName+"\'s Channel!</a></div></div><div class='clear'></div>").fadeIn(100);
        $("div.thenavs").not(this).removeClass('selected');
        $(this).find("div.thenavs").toggleClass('selected');
      });
    });
  }
  else if ( service === 'twitch' ) {
    $(document).ready(function(){
      $("li#"+username).click(function(){
        $("div#replace").hide().html("<div id='streamer'><object bgcolor='#000000' data='//www-cdn.jtvnw.net/swflibs/TwitchPlayer.swf' height='448' type='application/x-shockwave-flash' width='735' id='twitchplay'><param name='allowFullScreen' value='true' /><param name='allowNetworking' value='all' /><param name='allowScriptAccess' value='always' /><param name='movie' value='//www-cdn.jtvnw.net/swflibs/TwitchPlayer.swf' /><param name='flashvars' value='channel="+username+"&auto_play=true' /></object></div><div class='description'><div id='prevlogo'><img src='"+logo+"' width='36px' height='36px' /></div><div id='who'><p id='theirname'><a href='//www.twitch.tv/"+username+"' target='_blank'></a></p><p id='theirgame'>playing "+game+"</p></div><div class='clear'></div><div class='streamtitle'>"+status+"</div><div class='streambio'><div class='biotit'>Stream Description</div>' . $thebio . '<br /><br /><br /><a href='//www.twitch.tv/"+username+"' target='_blank'>Check out "+displayName+"\'s Channel!</a></div></div><div class='clear'></div>").fadeIn(100);
        $("div.thenavs").not(this).removeClass('selected');
        $(this).find("div.thenavs").toggleClass('selected');
      });
    });
  }
});

上面是我的stream.js文件。我想用jQuery为json文件中的每个json数组重复可能的onclick事件。

不确定我是否正确行事......

以前我使用PHP和Jquery x_x的意大利面条代码我被告知这很糟糕。所以我试图学习如何只使用JavaScript ...

解析JSON并为每个调用Jquery

0 个答案: