我有一个链接,我可以点击,它使用ajax,获取json数据然后我循环并向div添加数据。这部分工作正常。我现在想要在彩色框中显示#IndeedResults中的结果,但无法使其工作。这就是我所拥有的:
<p><span id="IndeedJobs">Click here to see job opportunities.</span></p>
<div id="IndeedResults"></div>
<br /><br />
<script type="text/javascript">
$(document).ready(function () {
$('#IndeedJobs').click(function () {
var vURL = "http://api.url.com";
$.ajax({
type: 'GET',
url: vURL,
dataType: 'jsonp',
beforeSend: function() {
$('#IndeedResults').empty();
$('#IndeedResults').show();
},
complete: function() {
$('#IndeedJobs').hide();
},
success: function(data) {
var x = data.results;
for (var i=0; i<x.length; i++)
{
var vJobTitle = x[i].jobtitle;
var vCompany = x[i].company;
var vCity = x[i].city;
var vState = x[i].state;
var vCountry = x[i].country;
var vLocation = x[i].formattedLocation;
var vSource = x[i].source;
var vDate = x[i].date;
var vSnippet = x[i].snippet;
var vResultURL = x[i].url;
var vRelativeTime = x[i].formattedRelateiveTime;
var vHTML = '<hr>' + vJobTitle + '<br />'
vHTML += vCompany + '<br />'
vHTML += vLocation + '<br />'
vHTML += '----------------'
vHTML += '<p>' + vSnippet + '<span><a href="' + vResultURL + '">View More</a></span><br /><b>' + vDate + '</b></p>'
vHTML += '----------------'
$('#IndeedResults').append(vHTML);
}
$('#IndeedResults').colorbox({inline:true});
},error: function (jxhr, msg, err) {
$('#IndeedResults').html("Data NOT posted. Error returned:" + JSON.stringify(jxhr));
}
});
});
});
</script>
预期的结果是输出我在颜色框窗口中附加到#IndeedResults的html代码。