我有这段代码:
<?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--;
}
?>
单击“显示评论”按钮时,应显示评论框。它适用于第一个。但它对其他人没有用。什么错?
答案 0 :(得分:5)
我只是逃避php解释器并将HTML标记直接打印到页面中。我还将id更改为类,因此我们可以更轻松地重用它们而不需要额外的数字。
<?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;
?>
我不知道show的the element with an ID
是什么,但我们只是假设它是按钮。
$(".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,只需将其包含在页面的头部或单独的文件中。
修改
如下面的评论中所示,在jQuery 1.9中,toggle
不再有效,因为您打算使用它,作为解决方法,您可以向按钮添加data attribute
,以及每次点击都会检查它。
<button class="button" data-clicked="0">
正如您所看到的,我们添加了新的data-clicked
属性。
在上面的JavaScript中,您可以看到我们完全改变了它的工作方式。我们执行自己的if/else
来检查data-clicked
州。
答案 1 :(得分:0)
分离代码,标记和样式声明通常是一种很好的做法。作为一种风格问题,我更喜欢编号ID。我发现它们有助于调试。因人而异 我也喜欢动画变化,以便人们可以更轻松地跟随变化。
<!doctype html>
<html>
<head>
<title>Button Testing 1 2 3</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
.comment {
display: none;
height: 0px;
width: 500px;
}
td {
width: 500px;
border: 1px solid #555;
border-collapse: collapse;
}
</style>
</head>
<body>
<?
$j = 0;
while ($j < 5 ) {
?>
<table>
<tr>
<td>
<button id="button_<?= $j ?>" class="button">Show comments</button>
</td>
</tr>
<tr>
<td class="comment"><span id="comment_<?= $j ?>">J = <?= $j ?></span></td>
</tr>
</table>
<?
$j++;
} ?>
<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(){
var id = $(this).attr('id');
var j = id.substr(id.indexOf('_') +1);
if ($(this).hasClass('revealed')) {
$(this).removeClass('revealed').text('Show Comments');
$('#comment_'+j).removeClass('revealed').parent().animate({'height' : 0}, function(){$(this).css({'display': 'none'})});
} else {
$(this).addClass('revealed').text('Hide Comments');
$('#comment_'+j).addClass('revealed').parent().css({'display': 'inline'}).animate({'height' : '300px'});
}
});
});
</script>
</body>
</html>