Question

<?php
session_start();
?>
<!DOCTYPE html>
<html>
    <body>

        <h2 id="title">Choose a background Theme</h2>
        <div id="black"></div>
        <div id="orange"></div>
        <div id="brown"></div>

    </body>
</html>

我正在尝试存储会话参数中div中单击的颜色，以分配我尝试将其附加到查询字符串的值，以便我可以使用$_GET变量将其存储在会话变量中< / p>

<script>
    var c_selected;
    window.onload = function () {

        document.getElementById("black").addEventListener("click", function () {
            setBackground("black");

        });
        document.getElementById("orange").addEventListener("click", function () {
            setBackground("orange");
        });
        document.getElementById("brown").addEventListener("click", function () {

            setBackground("brown");
        });

    };

    function setBackground(scolor) {
        location.href = (location.href.split("?").length > 1) ? location.href.split("?")[0] + "?color=" + scolor : "?color=" + scolor;
        document.body.style.backgroundColor = scolor
        document.getElementById(scolor).style.border = "thick solid white";
        if (c_selected) {
            document.getElementById(c_selected).style.border = "none";
        }
        document.getElementById("title").style.color = "white";
        <?php $_SESSION['THEME_COLOR'] = isset($_GET['color']) ? $_GET['color'] : "white"; ?>
        c_selected = scolor;
    }


</script>

但是现在只要我点击任何<div>，背景颜色就会被执行一瞬间，任何返回到默认的白色背景，只有在执行该函数后才追加查询字符串。

请解释原因，而不仅仅是解决方案。

Answer 1

如果您通过更改查询参数更改location.href，则会使浏览器重新加载页面，因为这表示新位置。为防止这种情况发生，您需要使用location.href而不是#作为分隔符来更改哈希?。

如果你想重新加载页面，你需要在页面加载后实际设置背景颜色，现在你要附加点击处理程序，调用setBackground()，然后重新加载页面。

window.onload = function () { 
 /*add click handlers*/ 
 document.body.style.backgroundColor = "<?php $_SESSION['THEME_COLOR'] = isset($_GET['color']) ? $_GET['color'] : "white"; ?>";
}

无需更改setBackground()中的背景颜色，因为该功能会使浏览器重新加载页面，因此您不会看到结果很长。

Answer 2

当您更改location.href时，您正在重新加载页面，但随着脚本继续运行，您可以看到何时更改颜色属性。

看一看，我只评论了您要更改的行location.href。

如果要将颜色用作查询字符串参数，则应使用哈希＃参数

＆＃13;

  var c_selected;
  window.onload = function() {
  document.getElementById("black").addEventListener("click", function() {
    setBackground("black");

  });
  document.getElementById("orange").addEventListener("click", function() {
    setBackground("orange");
  });
  document.getElementById("brown").addEventListener("click", function() {

    setBackground("brown");
  });

};

function setBackground(scolor) {
  
  /*location.href = (location.href.split("?").length > 1) ? location.href.split("?")[0] + "?color=" + scolor : "?color=" + scolor;*/
  
  document.body.style.backgroundColor = scolor;
  document.getElementById(scolor).style.border = "thick solid white";
  return;
  if (c_selected) {
    document.getElementById(c_selected).style.border = "none";
  }
  
  
  c_selected = scolor;
}

＆＃13;

<html>
<body>

    <h2 id="title">Choose a background Theme</h2>
    <div id="black">Black</div>
    <div id="orange">Orange</div>
    <div id="brown">Brown</div>

</body>
</html>

＆＃13;

为什么在执行JavaScript函数后会追加查询字符串参数？

2 个答案: