Question

我正在开发一个应用程序，我需要解析JSON并显示它。我使用了getJSON()函数，它工作正常，我使用$(class_name).html(text)。当我在浏览器中查看隔离的HTML文件时，减去CSS格式，我可以看到文本，但是当我运行应用程序并导航到页面时，文本（带有CSS格式）不会显示。即使我检查元素，文本也不存在。为什么会这样？

谢谢

console.log(data);包含的内容：

schools:"Schools"
search-school:"Search school by number or name"
student-det:"Student Details"
students:"Students"
summary:"Summary"

实际的JSON：

{
"schools":"Schools",
"search-school":"Search school by number or name",
"student-det":"Student Details",
"students":"Students",
"summary":"Summary"
}

＆＃13;

$.getJSON("./lang/en.json", function(data) {
  $(".SecondTopBarTitleProperties").html(data.schools);
});

＆＃13;

.SecondTopBarProperties
{
 background-color:#333333;
 height:40px;
}
.SecondTopBarTitleProperties
{
 color:white;
 font-size:16px;
 margin-top:6px;
 margin-left:6px;
 font-family: Helvetica;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container SecondTopBarProperties">
  <label class="SecondTopBarTitleProperties"></label>
  <button data-bind="click:NewSchool" type="button" class=" pull-right btn btn-primary btn-default btn-sm" style="margin-right: 10px;margin-top: 2px; margin-bottom: 2px;">Add School</button>
</div>

＆＃13;

在＆＃34; Add School＆＃34;之前按钮，它应该显示＆＃34;学校＆＃34;。

纯HTML：

格式化：

请帮忙吗？

Answer 1

你需要等待JS的执行，直到DOM准备好，否则你的JS不能操纵DOM元素，因为它们还不存在。

＆＃13;

StarWarsApi.init();
StarWars api = StarWarsApi.getApi();
m_vwPeopleLayout.setAdapter(m_peopleAdapter);

api.getAllPeople(i, new Callback<SWModelList<People>>() {
    @Override
    public void success(SWModelList<People> planetSWModelList, Response response) {
        for (People p : planetSWModelList.results) {
            peopleArrayList.add(p);
        }
    }

    @Override
    public void failure(RetrofitError error) {
        System.out.print("failure");
    }
});

//code to sort arrayList

m_peopleAdapter.notifyDataSetChanged();

＆＃13;

如果这对您不起作用，那么您需要检查<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $( document ).ready(function() { // Code inside this block will be executed when the DOM is ready var data = { schools: "Schools" }; $(".SecondTopBarTitleProperties").html(data.schools); }); // DOM ready </script> <div class="container SecondTopBarProperties"> <label class="SecondTopBarTitleProperties"> </label> <button data-bind="click:NewSchool" type="button" class=" pull-right btn btn-primary btn-default btn-sm" style="margin-right: 10px;margin-top: 2px; margin-bottom: 2px;">Add School</button> </div>的作用，因为我们无法为您测试此部分。

也许是因为复制和粘贴，但它应该在没有这些空格的情况下阅读$.getJSON("./lang / en.json ", function(data) {。

检查浏览器的$.getJSON("./lang/en.json", function(data) {标签（在浏览器的控制台中），查看您从服务器请求的内容以及服务器返回的内容。

Answer 2

你需要将你的风格包含在你准备好这个小提琴的html代码中

https://jsfiddle.net/vmf3e3mf/4/

$(function(){

var data = { name = "hey" }

$('.SecondTopBarTitleProperties').html('<span   style="color:red">'+data.name+'</span>')
 })

Answer 3

我在w3schools尝试了这个，它运行正常。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

  var data = { name :"hey" };
  alert('hi');
  $('.SecondTopBarTitleProperties').html(data.name);
 });
 </script>
 </head>
 <body>

 <div class="container SecondTopBarProperties">
 <label class="SecondTopBarTitleProperties"></label>
 <button data-bind="click:NewSchool" type="button" class=" pull-right btn btn-primary btn-default btn-sm" style="margin-right: 10px;margin-top: 2px; margin-bottom: 2px;">Add School</button></div>

</body>
</html>

JQuery html（）不适用于css

3 个答案: