试图让 php foreach 循环中的 javascript 函数工作答案

【问题标题】：Trying to get a javascript function in a php foreach loop to work试图让 php foreach 循环中的 javascript 函数工作
【发布时间】：2014-03-06 08:31:49
【问题描述】：

我最近回答了一个关于使用一些简单的 javascript 创建 2 个弹出框的问题。我附上了下面答案的演示。我是一个刚开始学习JS的新手PHP开发人员。我的问题是这个..

下面的代码是一个论坛。 “提出问题”会创建一个可以提出问题的弹出窗口 - 这部分代码很好。这些问题是使用一个简单的 PHP foreach 循环从我的数据库中提取的，对于每个问题，我需要一个“编辑”按钮，每个问题都会创建弹出的“编辑问题”。下面的演示适用于编辑一个问题（第一个），但不适用于后续问题。我知道这可能是一件简单的事情，与函数的调用方式等有关，但尽管在网上找到了“解决方案”，但我什么也做不了。我习惯于能够在我想要的任何时间和任意次数的 PHP 中调用函数。显然，我的 JS 不是这种情况，因为它是写在这里的。有人能给我一些建议吗？

HTML

<button id="AskQuestion">Ask question</button>
<button id="EditQuestion">Edit question</button>

<div id="overlay"></div>

<div id="popup">
<h2>Question?</h2>
<button id="CloseBtn">Close</button>
</div>

<div id="popupEdit">
<h2>Edit Question</h2>
<button id="CloseEditBtn">Close</button>
</div>

CSS

#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
display: none;
}

#popup, #popupEdit {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -200px;
width: 400px;
height: 300px;
display: none;
background: #EEE;
}

javascript

     window.onload = function () {
     document.getElementById("AskQuestion").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popup = document.getElementById("popup");
     overlay.style.display = "block";
     popup.style.display = "block";
     };

     document.getElementById("CloseBtn").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popup = document.getElementById("popup");
     overlay.style.display = "none";
     popup.style.display = "none";
     };

     document.getElementById("EditQuestion").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popupEdit = document.getElementById("popupEdit");
     overlay.style.display = "block";
     popupEdit.style.display = "block";
     };

     document.getElementById("CloseEditBtn").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popupEdit = document.getElementById("popupEdit");
     overlay.style.display = "none";
     popupEdit.style.display = "none";
   };
  };

我希望这很清楚......并感谢任何帮助。这些天我似乎每天都在转向 Stackoverflow .....eek

演示http://jsfiddle.net/nRfC2/

这个我试过.....

  window.onload = function () {
 document.getElementById("AskQuestion").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popup = document.getElementById("popup");
     overlay.style.display = "block";
     popup.style.display = "block";
   };

 document.getElementById("CloseBtn").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popup = document.getElementById("popup");
     overlay.style.display = "none";
     popup.style.display = "none";
 };

 document.getElementsByClassName("EditQuestion").onclick = function () {
     var overlay = document.getElementsByClassName("overlay");
     var popupEdit = document.getElementsByClassName("popupEdit");
     overlay.style.display = "block";
     popupEdit.style.display = "block";
 };

 document.getElementsByClassName("CloseEditBtn").onclick = function () {
     var overlay = document.getElementsByClassName("overlay");
     var popupEdit = document.getElementsByClassName("popupEdit");
     overlay.style.display = "none";
     popupEdit.style.display = "none";
 };
 };

CSS

 #overlay {
 display:none;    
 position:fixed;  
 left:0px;        
 top:0px;         
 width:100%;      
 height:100%;     
 background:#000; 
 opacity:0.5;     
 z-index:99999;   
  }

 .overlay {
 display:none;    
 position:fixed;  
 left:0px;        
 top:0px;         
 width:100%;      
 height:100%;     
 background:#000; 
 opacity:0.5;     
 z-index:99999;   
  }

  #popup {
  display:none;
  position:fixed;
  left:40%;        
  top:30%;         
  width:600px;     
  height:150px;
  margin-top:-75px;
  margin-left:-150px;
  background:#FFFFFF;
  border:1px solid #000;
  z-index:100000;      
  }

  .popupEdit {
  display:none;
  position:fixed;
  left:40%;        
  top:30%;         
  width:600px;     
  height:150px;
  margin-top:-75px;
  margin-left:-150px;
  background:#FFFFFF;
  border:1px solid #000;
  z-index:100000;      
  }

 button#AskQuestion{
padding: 0;
border: none;
background: none;
color:#A8A8A8;
font-weight: bold;
  }

 button#CloseBtn {
padding: 0;
border: none;
background: none;
position:absolute;
right:10px;
top:5px;
  }



button.EditQuestion{
padding: 0;
border: none;
background: none;
color:#A8A8A8;
font-weight: bold;
 }

 button.CloseEditBtn {
padding: 0;
border: none;
background: none;
position:absolute;
right:10px;
top:5px;
  }

HTML 问问题编辑问题

   <div id="overlay"></div>

   <div id="popup">
   <h2>Question?</h2>
   <button id="CloseBtn">Close</button>
   </div>

   <div class="popupEdit">
   <h2>Edit Question</h2>
   <button class="CloseEditBtn">Close</button>
   </div>

仍然没有运气......任何接受者......？

【问题讨论】：

标签： javascript php function foreach popup

【解决方案1】：

如果您希望能够编辑每个问题（在数据库中更新它），您需要数据库中的问题 ID。

我会这样做：

<button id="EditQuestion" onclick="editQuestion(2);">Edit question</button>

在您的 onclick 操作中，将 id（在本例中为 2）作为参数传递。在您的 editQuestion() 函数中，您显示弹出窗口并将此 ID 包含在编辑表单中的隐藏字段中。

<script>
function editQuestion(questionId){
   var overlay = document.getElementById("overlay");
   var popupEdit = document.getElementById("popupEdit");
   //in your edit form, create a hidden field and put var questionId in as value
   overlay.style.display = "block";
   popupEdit.style.display = "block";
}
</script>

【讨论】：

【解决方案2】：

问题是你通过 id 获取元素，但是如果你有一些不同的元素，javascript 不知道哪个元素是正确的元素。因此，您可以以肮脏的方式修改您的脚本，为每个元素添加顺序 ID，如下所示：

<button id="AskQuestion">Ask question</button>
<button id="EditQuestion">Edit question</button>

<div id="overlay"></div>

<div id="popup">
<h2>Question?</h2>
<button id="CloseBtn">Close</button>
</div>

<div id="popupEdit">
<h2>Edit Question</h2>
<button id="CloseEditBtn">Close</button>
</div> 

<div id="popupEdit2">
<h2>Edit Question</h2>
<button id="CloseEditBtn2">Close</button>
</div>

并为您的 javascript 执行此操作：

 window.onload = function () {
   document.getElementById("AskQuestion").onclick = function () {
   var overlay = document.getElementById("overlay");
   var popup = document.getElementById("popup");
   overlay.style.display = "block";
   popup.style.display = "block";
 };

 document.getElementById("CloseBtn").onclick = function () {
   var overlay = document.getElementById("overlay");
   var popup = document.getElementById("popup");
   overlay.style.display = "none";
   popup.style.display = "none";
 };

 document.getElementById("EditQuestion").onclick = function () {
   var overlay = document.getElementById("overlay");
   var popupEdit = document.getElementById("popupEdit");
   overlay.style.display = "block";
   popupEdit.style.display = "block";
 };

 document.getElementById("CloseEditBtn").onclick = function () {
   var overlay = document.getElementById("overlay");
   var popupEdit = document.getElementById("popupEdit2");
   overlay.style.display = "none";
   popupEdit.style.display = "none";
 };



 document.getElementById("EditQuestion2").onclick = function () {
   var overlay = document.getElementById("overlay");
   var popupEdit = document.getElementById("popupEdit2");
   overlay.style.display = "block";
   popupEdit.style.display = "block";
 };

 document.getElementById("CloseEditBtn2").onclick = function () {
   var overlay = document.getElementById("overlay");
   var popupEdit = document.getElementById("popupEdit2");
   overlay.style.display = "none";
   popupEdit.style.display = "none";
 };

更好的方法是使用类名来分组和检索您的元素。所以为你感兴趣的每个元素添加一些类标识符，并使用 document.getElementsByClassName('someClass');

【讨论】：