Question

我最近回答了有关使用一些简单的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

DEMO http://jsfiddle.net/nRfC2/

我试过这个......

JS

  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>

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

Answer 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>

Answer 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";
 };

更好的方法是使用类名来分组和检索元素。所以在你的intrest的每个元素中添加一些类标识符，并使用document.getElementsByClassName（'someClass'）;

试图在php foreach循环中获取javascript函数

2 个答案: