时间戳

首页 > 解决方案 > 调用javascript函数时的问题

javascript - 调用javascript函数时的问题

问题描述

我有一个页面，当我从另一个 .html 页面调用 js 函数时，我希望进行某些更改更准确地说，当我按下第 2 页上的按钮时，我希望第 1 页上的图像可见。我怎样才能做到这一点？

img_visibility_cod.js

function showImage(n){
        if(n==1)
        document.getElementById('im1').style.visibility="visible";
        else
        if(n==2)
        document.getElementById('im2').style.visibility="visible";
    }

page2.html

<script type="text/javascript" src="img_visibility_cod.js"></script>
<input class="buton-verif" type="button" value="Finish" onclick="showImage(1)" />

page1.html

<script type="text/javascript" src="img_visibility_cod.js"></script>
<li class="lst"><img id="im1" src="imagini/verif.png"></li>
<li class="lst"><img id="im2" src="imagini/verif.png"></li>

标签： javascripthtmlcss

解决方案

页面之间的数据不会保留在 JavaScript 中，当您切换页面时它会重新加载。

但是，您可以做的是使用 localstorage api，它使用起来非常简单：

localstorage.setItem("imageID", 1)

和

let n = localstorage.getItem("imageID")

所以在 showImage 中不用传入 n 作为参数，你可以像上面那样定义它。

另一件事是，当您访问第 1 页时需要运行 showImage，在第 2 页中页面上不会有任何图像，因此您的代码将看不到它们。

您将需要第 2 页的另一个功能来执行第一个片段

编辑：代码示例：

// this is img_visibility_cod.js

function showImage() {
  // get n's value from the browser's storage
  let n = localstorage.getItem('imageId');
  
  // first time we run, n is not set, so we get undefined and have to set it to something
  if (n == undefined) 
    n = 1
  
  // local storage only saves things as string, have to turn it back into a number
  n = Number(n)
  if (n == 1)
    document.getElementById('im1').style.visibility = "visible";
  else
  if (n == 2)
    document.getElementById('im2').style.visibility = "visible";
}
// to run the function every time page 1 loads you need to invoke the function, alternative have no function at all and just write code directly
showImage()


function switchImage() {
  let n = localstorage.getItem('imageId');
  n = Number(n)
  if (n == 1)
    localstorage.setItem('imageId', 2)
  else 
    localstorage.setItem('imageId', 1)

}
<!-- page 1 -->

<script type="text/javascript" src="img_visibility_cod.js"></script>
<li class="lst"><img id="im1" src="imagini/verif.png"></li>
<li class="lst"><img id="im2" src="imagini/verif.png"></li>

<!-- page 2 (the other file) -->

<script type="text/javascript" src="img_visibility_cod.js"></script>
<input class="buton-verif" type="button" value="Finish" onclick="showImage(1)" />

推荐阅读