php while循环内的javascript [英] javascript inside php while loop
问题描述
我有这个代码:
<?php
$i=5;
while($i > 0){
echo '
<table width="500px" border="1">
<tr>
<td>
<button id="button">Show comments</button>
</td>
</tr>
<tr>
<td id="comments" style="display:none;height:300px;width:100%;"></td>
</tr>
</table>
<script type="text/javascript">
$("#button").toggle(
function (){
$("#button").text("Hide Comments");
document.getElementById("comments").style.display="inline";
},function (){
$("#button").text("Show Comments");
document.getElementById("comments").style.display="none";
}
);
</script>
<script type="text/javascript" src="jquery.js"></script>
';
$i--;
}
?>
单击显示评论"按钮时,将显示评论框.它适用于第一个.但这对其他人不起作用.怎么了?
When the show comments button is clicked the comment box should show up. It works for the first one. But it doesn't work for the others.What's wrong?
推荐答案
我只是逃脱了php解释器并将HTML标记直接打印到页面中.我还将id更改为class,因此我们可以更轻松地重用它们,而无需添加古怪的数字.
I'd just escape the php interpreter and print the HTML markup directly into the page. I'd also change the ids to classes, so we can more easily reuse them without quirky additional numbers.
<?php
$i=5;
while($i > 0):
?>
<table width="500px" border="1">
<tr>
<td><button class="button" data-clicked="0">Show comments</button></td>
</tr>
<tr>
<td class="comments" style="display:none;height:300px;width:100%;"></td>
</tr>
</table>
<?php
$i--;
endwhile;
?>
我不知道节目的the element with an ID
是什么,但是我们只是假设它是按钮.
I don't know what the element with an ID
of show is, but we'll just assume it was the button.
$(".button").click(function (){
var $this = $(this);
if(!$this.data('clicked')){
$this.text("Hide Comments");
$this.closest('table').find('.comments').css('display', 'inline');
$this.data('clicked', 1);
}else{
$this.text("Show Comments");
$this.closest('table').find('.comments').css('display', 'none');
$this.data('clicked', 0);
}
});
不要在php的while
循环中打印该javascript,只需将其包含在页面顶部或单独的文件中即可.
Don't print that javascript in a while
loop in php, just include it in the head of the page, or in a separate file.
修改
如下面的注释所示,在jQuery 1.9中,toggle
不再起作用,因为您打算使用它,作为一种变通方法,您可以在按钮上添加data attribute
,并在每次检查时进行检查我们点击.
As indicated in a comment below,in jQuery 1.9 the toggle
no longer works as you're intending to use it, as a work around, you can add a data attribute
to the button, and check it each time we click.
<button class="button" data-clicked="0">
如您所见,我们已经添加了新的data-clicked
属性.
As you can see we've added the new data-clicked
attribute.
在上面的JavaScript中,您可以看到我们已经完全改变了它的工作方式.我们执行自己的if/else
来检查data-clicked
状态.
In our JavaScript above, you can see that we've completely changed how it works. We perform our own if/else
to check the data-clicked
state.
这篇关于php while循环内的javascript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!