php while循环内的javascript

Question

i have this code: 我有此代码：

<?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? 但这对其他人无效，怎么了？

Answer 1

I'd just escape the php interpreter and print the HTML markup directly into the page. 我只是逃脱了php解释器，并将HTML标记直接打印到页面中。 I'd also change the ids to classes, so we can more easily reuse them without quirky additional numbers. 我还将id更改为class，因此我们可以更轻松地重用它们，而无需添加古怪的数字。

<?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;
?>

I don't know what the element with an ID of show is, but we'll just assume it was the button. 我不知道显示the element with an ID为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);
    }

});

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. 不要在php中的while循环中打印该javascript，只需将其包含在页面的开头或单独的文件中即可。

Edit 编辑

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. 如下面的注释中所述，在jQuery 1.9中， toggle不再起作用，因为您打算使用它，作为一种解决方法，您可以向按钮添加data attribute ，并在每次单击时进行检查。

<button class="button" data-clicked="0">

As you can see we've added the new data-clicked attribute. 如您所见，我们添加了新的data-clicked属性。

In our JavaScript above, you can see that we've completely changed how it works. 在上面的JavaScript中，您可以看到我们已经完全改变了它的工作方式。 We perform our own if/else to check the data-clicked state. 我们执行自己的if/else检查data-clicked状态。

Answer 2

It is generally good practice to separate code, markup and style declarations. 分离代码，标记和样式声明通常是一个好习惯。 As a matter of style, I prefer numbered IDs. 作为样式，我更喜欢编号ID。 I find they help with debugging. 我发现它们有助于调试。 ymmv I also like to animate changes so people can more easily follow a change. ymmv我也喜欢为更改设置动画，以便人们可以更轻松地跟随更改。

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

php while循环内的javascript

问题描述

2 个解决方案

解决方案1
5 已采纳 2013-02-04 04:52:45

解决方案2
0 2013-02-04 05:50:45

php while循环内的javascript

问题描述

2 个解决方案

解决方案1 5 已采纳 2013-02-04 04:52:45

解决方案2 0 2013-02-04 05:50:45

解决方案1
5 已采纳 2013-02-04 04:52:45

解决方案2
0 2013-02-04 05:50:45