json break的特殊字符html

Question

我正在使用API​​，這是一個'在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>\" >"); 

您可以重複轉義，其餘雙引號，這將防止串從分崩離析，而串聯。

也只是爲了您的信息，標題屬性中的標記沒有效果，除非它們以某種方式由JavaScript處理。