Question

我使用api，这是一个＆＃39;在一个json中，它打破了我的HTML。

 function heroSkills(id){
      heroSkill = [];
        $.ajax({
          type: "GET",
          async: false,
          url: "js/champs_v2.json",
          dataType: "json",
          success: function(data){
            $(data.data).each(function(index,value){
              var listSkills = value;
              for(ls in listSkills){

                if(listSkills[ls].id == id){
                //  console.log(listSkills[ls].passive.image.full);
                    heroSkill.push({passive_name:listSkills[ls].passive.name,passive_description:listSkills[ls].passive.description,passive_image:listSkills[ls].passive.image.full});

                    for(la in listSkills[ls].spells){
                      champSkill = listSkills[ls].spells[la];
                      skillImage = champSkill.image.full;
                      skillDescription = champSkill.description;
                      skillName = champSkill.name;
                      heroSkill.push({skill_name:skillName,skill_description:skillDescription,skill_image:skillImage});
                    }
                }
              }
            });
            heroSkill.push({version:data.version});
          }
        });

        return heroSkill;

    }

然后我像这样输出

      var AhriTest = heroSkills("40");
      console.log(AhriTest);
      $('.passive').append("<img src='http://ddragon.leagueoflegends.com/cdn/"+AhriTest[5].version+"/img/passive/"+AhriTest[0].passive_image+"' class='imageClipSmall img-responsive' alt='pas' data-toggle='tooltip' data-html='true' data-placement='right' title=' <p> <h5> " + AhriTest[0].passive_name + " </h5> <small>" + AhriTest[0].passive_description + " </small> </p>' >");

      $('.HeroSkillQ').append("<img src='http://ddragon.leagueoflegends.com/cdn/"+AhriTest[5].version+"/img/spell/"+AhriTest[1].skill_image+"'  class='imageClipSmall' alt='pas' data-toggle='tooltip' data-html='true' data-placement='right' title=' <p> <h5> " + AhriTest[1].skill_name + " </h5> <small>" + AhriTest[1].skill_description + " </small> </p>' >");
      $('.HeroSkillW').append("<img src='http://ddragon.leagueoflegends.com/cdn/"+AhriTest[5].version+"/img/spell/"+AhriTest[2].skill_image+"'  class='imageClipSmall' alt='pas' data-toggle='tooltip' data-html='true' data-placement='right' title=' <p> <h5> " + AhriTest[2].skill_name + " </h5> <small>" + AhriTest[2].skill_description + " </small> </p>' >");
      $('.HeroSkillE').append("<img src='http://ddragon.leagueoflegends.com/cdn/"+AhriTest[5].version+"/img/spell/"+AhriTest[3].skill_image+"'  class='imageClipSmall' alt='pas' data-toggle='tooltip' data-html='true' data-placement='right' title=' <p> <h5> " + AhriTest[3].skill_name + " </h5> <small>" + AhriTest[3].skill_description + " </small> </p>' >");
      $('.HeroSkillR').append("<img src='http://ddragon.leagueoflegends.com/cdn/"+AhriTest[5].version+"/img/spell/"+AhriTest[4].skill_image+"'  class='imageClipSmall' alt='pas' data-toggle='tooltip' data-html='true' data-placement='right' title=' <p> <h5> " + AhriTest[4].skill_name + " </h5> <small>" + AhriTest[4].skill_description + " </small> </p>' >");

json它本身就是大发布它的方式所以这里只是一个问题http://puu.sh/fAnBB/f735ab544c.png/Untitled-4.png的屏幕如果需要可以发布它。

Answer 1

处理此类问题的一种方法是在传递属性时使用双引号

$('.passive').append("<img src=\"http://ddragon.leagueoflegends.com/cdn/"+AhriTest[5].version+"/img/passive/"+AhriTest[0].passive_image+"\" class=\"imageClipSmall img-responsive\" alt=\"pas\" data-toggle=\"tooltip\" data-html=\"true\" data-placement=\"right\" title=\" <p> <h5> " + AhriTest[0].passive_name + " </h5> <small>" + AhriTest[0].passive_description + " </small> </p>\" >");

你可以重复转义余下的双引号，这样可以防止字符串在连接时分崩离析。

同样仅为了您的信息，title属性中的标签无效，除非它们以某种方式由javascript处理。

来自json的特殊字符打破了html

1 个答案: