JavaScript的PHP內while循環

我有這樣的代碼：JavaScript的PHP內while循環

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

} 
?>

當點擊顯示評論按鈕評論框應顯示出來。它適用於第一個。但它對其他人不起作用。怎麼了？

來源

2013-02-04 user1763032

您的循環似乎具有相同的ID輸出的元素...這是無效的 – dakait

'id'應該是唯一的 –

什麼有#show ID？那是在按鈕上？它應該是show-0，show-1等或一類節目。此外，你需要指定第二個與第二個東西等等 – scottheckel

我只是逃脫了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; 
?>

我不知道是什麼節目的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); 
    } 

});

不打印的JavaScript在PHP中的while循環，只是將其包含在頁面的頭部，或在一個單獨的文件。

編輯

如在下面評論指出，在jQuery的1.9 toggle不再工作作爲你打算使用它，作爲一種解決方法，您可以將data attribute添加到該按鈕，並每次點擊都檢查一次。

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

正如你可以看到，我們已經添加了新的data-clicked屬性。

在我們上面的JavaScript中，你可以看到我們完全改變了它的工作方式。我們執行我們自己的if/else來檢查data-clicked狀態。

來源

2013-02-04 04:52:45 Ohgodwhy

使用'toggle'這種方式已被棄用......就像一個供參考。 – ahren

@ahren謝謝;我忘了那個。我認爲上述將起作用。 – Ohgodwhy

分離代碼，標記和樣式聲明通常是很好的做法。作爲風格問題，我更喜歡編號的ID。我發現他們幫助調試。 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>

來源

2013-02-04 05:50:45 Carl

JavaScript的PHP內while循環

回答

相關問題