setDataitem()修改

index_pj_2.html

@@ -4,23 +4,9 @@
     <meta charset="utf-8">
     <title>demo1</title>
     <script type="text/javascript" src='js/jquery-3.3.1.js'></script>
-    <!-- <link rel="stylesheet" href="css/index.css"> -->
 </head>
 <script type="text/javascript">
 
-
-
-
-// function changeState(){
-//   if ($("#myStatus").html()=='正常') {
-//       $("#myStatus").html("正在上传")
-//   } else {
-//       $("#myStatus").html("正常")
-//   }
-// }
-////////////////////////////////////
-// let str = 1;
-///////////////////////////////////
 let data = [
   {
     key:"str1",
@@ -58,30 +44,21 @@ String.prototype.replaceAll  = function(s1,s2){
 
 function setData(){
   let bodyHtml = document.body.innerHTML
-  // console.log('bodyHtml'+bodyHtml )
   let bodyHtmlBind = bodyHtml
-  // console.log('bodyHtmlBind:'+bodyHtmlBind )
-
   let target,lable = ""
   for (let i = 0; i < data.length; i++) {
       target="{{" + data[i].key + "}}"
-      // console.log('target:', target )
       lable="<CON key='"+ data[i].key+"'>" + data[i].value+"</CON>";
-      // console.log('lable:', lable )
+      // replaceAll()替换所有含有target的字符串为lable
       bodyHtmlBind = bodyHtmlBind.replaceAll(target,lable)
-      // 主要是这里的次数是data决定的,如何才能是具体内容决定呢?
-       // $(target).replaceAll(lable);
-  }
+}
   document.body.innerHTML = bodyHtmlBind;
 }
 
 
 function setDataItem(key,value){
-    // let btid = btid
-    console.log(event.target)
-    var target = event.target
-  let index = -1;
-  for (var i = 0; i < data.length; i++) {
+    let index = -1;
+    for (var i = 0; i < data.length; i++) {
     if (data[i].key==key) {
       data[i].value=value;
       index=i;
@@ -89,37 +66,23 @@ function setDataItem(key,value){
     }
    }
    if(index>=0){
-        // console.log('index:'+ index)
-        let bindingDom=$(target)
+       // 选中所有con标签,key是data[index].key的元素
+        let bindingDom=$("con[key="+ data[index].key+"]")
         console.log('bindingDom.len:'+ bindingDom.length)
-        // function(event) {
-        //     alert(event.target);
-        //     }
         bindingDom.html(data[index].value)
-        // console.log(data[index].value)
    }
 }
-// function changeMyString(){
-//     setDataItem('string1',"我...");
-//     setDataItem('string2',"ni...");
-// }
-// changeState();
+
 
 </script>
 <body>
     <div class="title">状态: <span id="myStatus">{{str1}}</span></div>
     <button onclick="setData()">上传{{str2}}</button>
-    <button onclick="setDataItem('btData1','新的内容')" id="bt2"  >{{btData1}}</button>
-    <button onclick="setDataItem('btData1','新的内容')" id="bt3" >{{btData1}}</button>
-
-    <!-- <input type="text" name="" value=""> -->
-
-
-<!-- <div onclick='changeMyString()'>{{string1}} {{btData1}}</div>
-<div class='btData'  v-for='item in array1'>{{item.name}}</div> -->
+    <button onclick="setDataItem('btData1','新的内容')" >{{btData1}}</button>
+    <button onclick="setDataItem('btData1','新的内容')" >{{btData1}}</button>
+    <button onclick="setDataItem('btData1','新的内容')" >{{btData1}}</button>
     <script type="text/javascript">
     setData();
-    // setDataItem(key,value)
     </script>
 </body>
 

spa_index.html

-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-<head>
-    <meta charset="utf-8">
-    <title>test</title>
-    <script type="text/javascript" src='js/jquery-3.3.1.js'></script>
-    <link rel="stylesheet" href="css\spa_index.css">
-</head>
-<script type="text/javascript">
-
-let router=[
-    {
-        name:"index",
-        path:"/index",
-        title:"首页",
-        isActive:"false",
-    },
-    {
-        name:"news",
-        path:"/news",
-        title:"新闻",
-        isActive:"true",
-    },
-    {
-        name:"about",
-        path:"/about",
-        title:"介绍",
-        isActive:"false",
-    },
-]
-
-function createHtmlPages() {
-        changePage('index')
-}
-
-function changePage(pageName) {
-    let index= -1
-    let indexActive=-1
-    for (var i = 0; i < router.length; i++) {
-        if (router[i].name==pageName) {
-            index=i;
-        }
-        if (router[i].isActive) {
-            indexActive=i;
-        }
-    }
-    if (index!=-1 && index!=indexActive) {
-        router[index].isActive=true;
-        router[indexActive].isActive=false
-        console.log("changed to"+ pageName);
-    }else {
-        console.log("page not found");
-    }
-    refreshHtml()
-}
-function refreshHtml() {
-    let htmlContent=' ';
-    for (let i = 0; i < router.length; i++) {
-        let addClass=' '
-        if (router[i].isActive) {
-                addClass=' '
-        } else {
-                addClass='hide';
-        }
-        htmlContent= htmlContent+ "<div class='page page-bgcolor-blue "+addClass+"' routeName='page-"+router[i].name+"'>"+router[i].title+"</div>"
-    }
-    console.log(htmlContent)
-    $("#layout-1").html(htmlContent)
-
-}
-
-</script>
-<body>
-        <div id="layout-1 ">
-
-        </div>
-
-
-
-
-
-        <!-- <div class="page page-bgcolor-blue" id="page-1">
-            <div>
-                <span onclick='changePage("page-1")'>首页</span>
-                <span onclick='changePage("page-2")'>新闻</span>
-                <span onclick='changePage("page-3")'>介绍</span>
-            </div>
-            <h1>首页</h1>
-        </div>
-        <div class="page page-bgcolor-blue" id="page-2">
-            <div>
-                <span onclick='changePage("page-1")'>首页</span>
-                <span onclick='changePage("page-2")'>新闻</span>
-                <span onclick='changePage("page-3")'>介绍</span>
-            </div>
-            <h1>新闻</h1>
-        </div>
-        <div class="page page-bgcolor-blue" id="page-3">
-            <div>
-                <span onclick='changePage("page-1")'>首页</span>
-                <span onclick='changePage("page-2")'>新闻</span>
-                <span onclick='changePage("page-3")'>介绍</span>
-            </div>
-            <h1>介绍</h1>
-        </div> -->
-</body>
-
-</html>