javascript - 试图在 JS 中做类似的事情
问题描述
所以我在我的网站上有一个部分,我发布了我正在从事的项目。我没有 API,所以我只有一个文件,我从中提取了我的内容,然后让它通过这个循环输出帖子。
<?php
foreach($projects as $project) {
echo "<div class=\"post project\">";
echo "<p class=\"date\">" .$project['date']. "</p>";
echo "<h2 class=\"intro\">" .$project['title']. "</h2>";
if (($project['image'] != "false")) {
echo "<img src=\"" .$project['imageSource']. "\"/>";
}
echo "<p>" .$project['content']. "</p>";
echo "</div>";
}
?>
这是它将从内容文件中提取的内容的示例。
<?php
/*__________PROJECTS START__________*/
$imagePath = "/img/projects/";
$projects = array(
"PiBox" => array(
"title" => "PiBox ",
"date" => "TBD",
"image" => "false",
"imageSource" => $imagePath . "",
"content" => "Currently wroking on getting all the parts. But it's going to be a built in a large mil-spec crate and will be solar powered."
),
);
/*__________PROJECTS END__________*/?>
这可能不是最美丽的事情,但它奏效了。可悲的是,我的新主机绝对不允许我使用 PHP。我可以使用 JS,但我不知道从哪里开始做这样的事情。任何帮助、建议或指示都会非常有用。我想尝试恢复我的网站,但当时我不知道 JS。
解决方案
你可以检查这个。
function displayContent( obj ){
// console.log( "obj" , obj )
var content = '<div class="post project">' +
'<p class="date">' + obj['date'] + "</p>" +
'<h2 class="intro"> ' + obj['title'] + "</h2>";
var img = ( obj.image !=false ) ? '<img src="' + obj['imageSource'] + '>"' : "";
content = content + img + '<p>' + obj["content"] + '</p>' ;
return content
}
let imagePath = "/img/projects/"
var objArray = [ ]
var piBox = { "title" : "PiBox ",
"date" : "TBD",
"image" : false ,
"imageSource" : imagePath ,
"content" : "Currently working on getting all the parts. But it's going to be a built in a large mil-spec crate and will be solar powered."
}
objArray.push( piBox )
var content = ""
for( item in objArray ){
content= content + displayContent(piBox )
}
content = content + '</div>'
console.log( content , "content ")
//document.getElementById("someWhereinTheBody").innerHTML = content
/* you can add body tag id="body" */
document.getElementById("body").innerHTML = content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body id="body">
Content is coming...
</body>
</html>
推荐阅读
- google-sheets - 移除隐藏的切片器
- javascript - 路由不会因不同的参数 ID 而改变,即使密钥不同
- pdf - Highcharts - PDF 导出格式问题。字体大小等
- jenkins - 单击“构建”后 1 小时如何开始工作
- validation - 我可以同时使用 JSF 验证器吗?
- r - R中是否有找出多个重复代码并保留其中一个?
- c++ - 如何在 Turbo C++ 中使用 Unicode?
- android - CSS 媒体查询不反映设备屏幕大小
- android - AAPT:错误:属性 android:requestLegacyExternalStorage 未找到
- php - 为什么流明视图方法无法从本地主机切换到实时服务器?