在 java 脚本中设置 URL 参数以及将类添加到 div答案

【问题标题】：Set URL parameter in java script along with add class to div在 java 脚本中设置 URL 参数以及将类添加到 div
【发布时间】：2020-11-14 12:27:04
【问题描述】：

我有一个具有 Onclick 功能的按钮，当单击该按钮时，它会将一个值传递给 JavaScript 该值将作为参数添加到 URL，如果设置了参数，JavaScript 函数会将类名添加到 div 标签。问题是：单击按钮时参数设置成功，但类名无法添加到 div 标签。下面是按钮代码：

 <button type="button" class="btn btn-circle btn-primary open" value="<?php echo $msgs['id'] ?>" onclick="myFunction(this.value)" > <i id="open" class="far fa-eye"></i></button>

在MyFunction() 函数下方：

function myFunction(val) {
  

    window.location.href = "contact.php?open-msg=" + val;

    const activeDiv = document.querySelector('.popup-overlay');
    const activeDiv1 = document.querySelector('.popup-content');

    activeDiv.classList.add('active'); 
    activeDiv1.classList.add('active'); 

}

我认为问题在于，在将参数添加到 URL 之后，页面刷新并且其余代码的执行被退出。我真的不知道如何解决这个问题。

【问题讨论】：

标签： javascript html

【解决方案1】：

由于页面已重新加载，JavaScript 将不会执行。试试这个方法：

<button type="button" class="btn btn-circle btn-primary open" value="<?php echo $msgs['id'] ?>" onclick="myFunction(this.value)"> <i id="open" class="far fa-eye"></i></button>
<script>
  function myFunction(val) {

    window.history.pushState('', '', '/contact.php?open-msg=' + val);

    const activeDiv = document.querySelector('.popup-overlay');
    const activeDiv1 = document.querySelector('.popup-content');

    activeDiv.classList.add('active');
    activeDiv1.classList.add('active');

  }
</script>

【讨论】：

【解决方案2】：

问题是页面会刷新，剩下的代码不会被执行。

所以你必须在更改参数之前添加类

应该是这样的

function myFunction(val) {

    const activeDiv = document.querySelector('.popup-overlay');
    const activeDiv1 = document.querySelector('.popup-content');

    activeDiv.classList.add('active'); 
    activeDiv1.classList.add('active'); 

    
    window.location.href = "contact.php?open-msg=" + val;

}

【讨论】：

【解决方案3】：

window.location.href 重定向页面。您可能想使用window.history.pushState 或window.history.replaceState

【讨论】：