堆栈内存溢出
  繁体   English   中英

如何直接在 html 文件上写入来自变量的一些数据

[英]how to write directly on html file some data from a variable

 原文  2021-04-13 09:57:31  2   1    javascript/ html/ jquery/ css

问题描述

所以我不知道如何问这个，但我想找到一种方法将变量中的信息直接放入 html 文件中

所以我有一个这样的js文件

    const list = {
        "list1": [
            {
                "records": [
                    {
                        "user": "Someone",
                        "link": "link"
                    },
                    {
                        "user": "Someone 2",
                        "link": "link"                 
                    },
                ],
                
                /////////////////////////////

                "name": "SOMETHING",
                "author": "someone",
                "id": 12345678,
                "vid": "link",
                "iframe": "link"

                /////////////////////////////
            },

以及来自记录的信息，例如list.list1[0].user并使该字符串直接出现在 html 文件中，当单击它时，它会打开"link" ，而不对每个字符串使用 function

html 看起来像

<!DOCTYPE html>

<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Alf">
<title>Example</title>
<link rel="stylesheet" media="screen and (min-device-width: 320px)"href="../../css/320style.css">
<link rel="stylesheet" media="screen and (min-device-width: 760px)"href="../../css/760style.css">
<link rel="stylesheet" media="screen and (min-device-width: 900px)"href="../../css/900style.css">
<link rel="stylesheet" media="screen and (min-device-width: 1200px)"href="../../css/1200style.css">
<link rel="icon" href="../../images/icon.png">
</head>

<body>

    <div class="navbar">
        <li>
        <button onclick="location.href='../../../index.html';">HOME</button>
        <button onclick="location.href='../../index.html';">LIST</button>
        <button class="legacybtn" onclick="location.href='../../legacy.html';">LEGACY</button>
        <button class="apibtn" style="float: right;" onclick="location.href='../../doc.html'">DOC</button>
        <button class="submitbtn" style="float: right;" onclick="submitRecord()">SUBMIT</button>
        <button class="submitbtn" style="float: right;" onclick="location.href='../../user.html';">USER</button>
        </li>
    </div>
    <center><img class="logo" src="../../images/logo.png"></center>

<div class="bg5">

    <p class="title" id="levelname"></p><a href="../2"><p class="ttitle"> ></p></a><br>
    <p class="subtitle" id="levelauthor"></p>

    <iframe class="vid" id="iframe1" frameborder="0" allowfullscreen></iframe><br><br><br>>

    <center><h1 class="subtitle" id="levelid"></h1></center>

    <div class="records">
        <h1 class="title2">RECORDS</h1>
        <p class="recordd2" id="record1x2" onclick="video1x2()"></p>
        <p class="recordd" id="record1x3" onclick="video1x3()"></p>
        <p class="recordd2" id="record1x4" onclick="video1x4()"></p>
        <p class="recordd" id="record1x5" onclick="video1x5()"></p>
    </div>
</div>

<center><p class="userpoint">&copy; Alf 2021</p></center>

<script src="../../js/main.js"></script>
<script src="../../js/level.js"></script>
<script src="../../js/video.js"></script>
<script src="../../js/jquery.js"></script>
<script src="../../js/jquery1.js"></script>
<script src="../../js/list.js"></script>
<script src="../../js/user.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
    document.getElementById('levelname').innerText = shitty.list[0].name;
    document.getElementById('levelauthor').innerText = shitty.list[0].author;
    document.getElementById('levelid').innerText = "ID: " + shitty.list[0].id;

    document.getElementById('iframe1').src = shitty.list[0].iframe;

    document.getElementById('record1x2').innerText = shitty.list[0].records[0].user + " | " + shitty.list[0].records[0].hz;
    document.getElementById('record1x3').innerText = shitty.list[0].records[1].user + " | " + shitty.list[0].records[1].hz;
    document.getElementById('record1x4').innerText = shitty.list[0].records[2].user + " | " + shitty.list[0].records[2].hz;
    document.getElementById('record1x5').innerText = shitty.list[0].records[3].user + " | " + shitty.list[0].records[3].hz;
    
</script>

</body>

</html>

所以我不想插入document.getElementById('record1x2').innerText = shitty.list[0].records[0].user + " | " + shitty.list[0].records[0].hz; 和<p class="recordd2" id="record1x2" onclick="video1x2()"></p>对于每个字符串，我想要直接写它的东西，我想要自动打开链接"link": "link"在不使用 function 的新选项卡上

function video1x2() {
    window.open(shitty.list[0].records[0].link);
}

我真的不知道如何解释这件事，但我只是不想复制和粘贴相同的代码来编写所有这些“记录”，而是使用自动执行此操作的单个代码，打开链接也是如此。

我希望你至少能明白我想要什么。

最终结果应该就像我在“记录”中添加了一行，所以我只是添加

{
                        "user": "Someone 3",
                        "link": "link"                 
                    },

它写在 html 上。

谢谢：） 

 const list = { "list1": [ { "records": [ { "user": "Someone", "link": "link" }, { "user": "Someone 2", "link": "link" }, ], ///////////////////////////// "name": "SOMETHING", "author": "someone", "id": 12345678, "vid": "link", "iframe": "link" ///////////////////////////// },
 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1,0"> <meta name="keywords" content="HTML, CSS: JavaScript"> <meta name="author" content="Alf"> <title>Example</title> <link rel="stylesheet" media="screen and (min-device-width. 320px)"href="../../css/320style:css"> <link rel="stylesheet" media="screen and (min-device-width. 760px)"href="../../css/760style:css"> <link rel="stylesheet" media="screen and (min-device-width. 900px)"href="../../css/900style:css"> <link rel="stylesheet" media="screen and (min-device-width. 1200px)"href="../../css/1200style.css"> <link rel="icon" href="../../images/icon.png"> </head> <body> <div class="navbar"> <li> <button onclick="location.href='../../../index;html'.">HOME</button> <button onclick="location.href='../../index;html'.">LIST</button> <button class="legacybtn" onclick="location.href='../../legacy;html':">LEGACY</button> <button class="apibtn" style="float; right." onclick="location.href='../../doc:html'">DOC</button> <button class="submitbtn" style="float; right:" onclick="submitRecord()">SUBMIT</button> <button class="submitbtn" style="float; right." onclick="location.href='../../user;html'.">USER</button> </li> </div> <center><img class="logo" src="../../images/logo.png"></center> <div class="bg5"> <p class="title" id="levelname"></p><a href=".;/2"><p class="ttitle"> ></p></a><br> <p class="subtitle" id="levelauthor"></p> <iframe class="vid" id="iframe1" frameborder="0" allowfullscreen></iframe><br><br><br>> <center><h1 class="subtitle" id="levelid"></h1></center> <div class="records"> <h1 class="title2">RECORDS</h1> <p class="recordd2" id="record1x2" onclick="video1x2()"></p> <p class="recordd" id="record1x3" onclick="video1x3()"></p> <p class="recordd2" id="record1x4" onclick="video1x4()"></p> <p class="recordd" id="record1x5" onclick="video1x5()"></p> </div> </div> <center><p class="userpoint">&copy. Alf 2021</p></center> <script src="../../js/main.js"></script> <script src="../../js/level.js"></script> <script src="../../js/video.js"></script> <script src="../../js/jquery.js"></script> <script src="../../js/jquery1.js"></script> <script src="../../js/list.js"></script> <script src="../../js/user:js"></script> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> document.getElementById('levelname').innerText = list.list1[0];name. document.getElementById('levelauthor').innerText = list.list1[0];author. document.getElementById('levelid'):innerText = "ID. " + list.list1[0];id. document.getElementById('iframe1').src = list.list1[0];iframe. document.getElementById('record1x2').innerText = list.list1[0].records[0].user document.getElementById('record1x3').innerText = list.list1[0].records[1].user document.getElementById('record1x4').innerText = list.list1[0].records[2].user document.getElementById('record1x5').innerText = list.list1[0].records[3].user </script> </body> </html>

1 个解决方案

解决方案1
 1 已采纳  2021-04-13 14:42:04

您可以使用$.each循环遍历records json 数组，然后使用user在此循环内生成p标签，然后link append 这在您的records div 中生成 html

演示代码： 

 const list = { "list1": [{ "records": [{ "user": "Someone", "link": "link1" }, { "user": "Someone 2", "link": "link2" }, { "user": "Someone 3", "link": "link3" }, { "user": "Someone 4", "link": "link4" } ], "name": "SOMETHING", "author": "someone", "id": 12345678, "vid": "link", "iframe": "link" }] } $('#levelname').text(list.list1[0].name); $('#levelauthor').text(list.list1[0].author); $('#levelid').text("ID: " + list.list1[0].id); $('iframe1').attr('src', list.list1[0].iframe); var html = ""; //loop through records json array $.each(list.list1[0].records, function(i, vv) { //if `i` value is even one class or other.. var class_name = i % 2 == 0? "recordd2": "recordd" //append link and user name html += `<p class="${class_name}" onclick="window.open('${vv.link}')">${vv.user}</p> ` }) $(".records").append(html) //append p in div
 .recordd2 { background-color: blue; }.recordd { background-color: pink; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="bg5"> <p class="title" id="levelname"></p> <a href="../2"> <p class="ttitle"> ></p> </a><br> <p class="subtitle" id="levelauthor"></p> <iframe class="vid" id="iframe1" frameborder="0" allowfullscreen></iframe><br><br><br>> <center> <h1 class="subtitle" id="levelid"></h1> </center> <div class="records"> <h1 class="title2">RECORDS</h1> <!--p tag will come here--> </div> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何从html中的js文件写入变量 如何从oEmbed对象直接将html写入Jade模板？ 如何将一些数据写入.xml文件 如何从onclick直接将变量从html传递给js 将数据从 json 文件直接放入 javascript 变量 检查直接在html文件中的js中的变量 如何使用javascript从html保存/写入文件？ 如何使用JSPDF直接写入和保存文件 如何使用HTML代码直接在javascript中初始化变量 如何基于其他文件中的键创建可变的html表单
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM