试图让PHP的foreach循环工作的JavaScript函数

我最近有一个问题回答关于创建2使用一些简单的JavaScript弹出框。我附上了下面答案的演示。我是刚刚开始学习JS的新手PHP开发人员。我的问题是这样的。试图让PHP的foreach循环工作的JavaScript函数

下面的代码是针对论坛的。 '问一个问题'创建一个弹出窗口，可以询问一个问题 - 这部分代码很好。使用简单的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"; 
    }; 
    };

我希望这是明确的....并感谢所有帮助。这些天，我似乎开始转向日常＃1伊克.....

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

仍然没有运气.......任何考生...？

来源

2014-03-06 GhostRider

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

我会做这样的事情：

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

在你的onclick行动，通过（在这种情况下2）的ID作为参数。在您的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>

来源

2014-03-06 09:02:25 jan

问题是你通过id获取元素，但是如果你有一些不同的元素，javascript不知道什么元素是正确的元素。所以，你可以在一个肮脏的方式你的脚本文件，添加顺序编号为每个元素修改，如：

<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'）;

来源

2014-03-06 09:13:03 gafreax

我已经试过这.... – GhostRider

试图让PHP的foreach循环工作的JavaScript函数

回答

相关问题