У меня есть этот код:

<?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
user1763032 4 Фев 2013 в 08:43

2 ответа

Лучший ответ

Я бы просто избежал интерпретатора php и распечатал HTML-разметку прямо на странице. Я также изменил бы идентификаторы на классы, чтобы мы могли легче использовать их без каких-либо необычных дополнительных чисел.

<?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 в цикле while в php, просто включите его в заголовок страницы или в отдельный файл.

Изменить

Как указано в комментарии ниже, в jQuery 1.9 toggle больше не работает, поскольку вы собираетесь его использовать, в качестве обходного пути вы можете добавить data attribute к кнопке и проверять ее каждый раз мы нажимаем.

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

Как видите, мы добавили новый атрибут data-clicked.

В нашем JavaScript выше вы можете видеть, что мы полностью изменили его работу. Мы выполняем наш собственный if/else для проверки состояния data-clicked.

5
Ohgodwhy 4 Фев 2013 в 06:49

Обычно рекомендуется разделять объявления кода, разметки и стиля. В качестве стиля я предпочитаю пронумерованные идентификаторы. Я считаю, что они помогают с отладкой. Я также люблю анимировать изменения, чтобы людям было легче следить за изменениями.

<!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>
0
Carl 4 Фев 2013 в 05:50