JQuery html（）不能用於css

我正在開發一個應用程序，我需要解析JSON並顯示它。我使用了getJSON()函數，該函數工作正常，我使用的是$(class_name).html(text)。當我在瀏覽器中查看獨立的HTML文件時，減去CSS格式，我可以看到文本，但是當我運行應用程序並導航到頁面時，文本（使用CSS格式）不顯示。即使當我檢查元素時，文本也不在其中。這是爲什麼發生？JQuery html（）不能用於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" 
}

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

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

<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>

在「添加學校」按鈕之前，應該顯示「學校」。

純HTML：

格式化：

任何幫助嗎？

來源

2016-05-31 BillyBob

不能幫助，如果我們不能看到你的代碼 –

_why會出現這種情況？_因爲你有一些錯誤代碼。你能拿出那個嗎？ – Jai

你需要更具體一些，並顯示一些代碼或重現問題 –

您需要等待您的JS的執行，直到DOM準備就緒，否則您的JS無法操作DOM元素，因爲它們還不存在。

<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) {沒有這些空格。

檢查您的瀏覽器的Network選項卡（在瀏覽器的控制檯中）以查看您向服務器請求的內容以及服務器返回的內容。

來源

2016-05-31 08:13:08

我試過這個，它不起作用。我的$ .getJSON（）函數工作正常，因爲它的目的是檢索相應的JSON字符串，它正確地執行。 – BillyBob

你可以在你的問題中提供'getJSON（）'返回的'data'的內容嗎？請從console.log（）提供它，不要只發布文件的內容。 –

好的，我已經加了 – BillyBob

你需要包括您的樣式到您的HTML代碼編寫我這個提琴

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

$(function(){ 

var data = { name = "hey" } 

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

來源

2016-05-31 08:20:13

我在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>

來源

2016-05-31 10:57:34 david9

JQuery html（）不能用於css

回答

相關問題