首页 > 解决方案 > 试图在 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。

标签: javascriptphp

解决方案


你可以检查这个。

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>


推荐阅读