javascript - PHP foreach 循环中的多个展开/折叠 Bootstrap 按钮

Question

我的代码几乎可以工作，但有一个问题我很难解决。这是我简化的一些代码。

    <?php for($counter = 0; $counter < 5; $counter++)
    {
    ?>
    <button type="button" id="<?php echo 'change_button_label_' . $counter?>" data-toggle="collapse" data-target="<?php echo '#button_number_' . $counter?>" class="btn btn-warning"><span class="glyphicon glyphicon-chevron-down"></span>Expand</button>

    <div id="<?php echo 'button_number_' . $counter?>" class="collapse">
        This gets collapsed #<?php echo "$counter"; ?>
    </div>

    <script>
        $('<?php echo "#change_button_label_" . $counter?>').click(function () {
            if($('button span').hasClass('glyphicon-chevron-up'))
            {
                $('<?php echo "#change_button_label_" . $counter?>').html('<span class="glyphicon glyphicon-chevron-down"></span>Expand');
            }
            else
            {
                $('<?php echo "#change_button_label_" . $counter?>').html('<span class="glyphicon glyphicon-chevron-up"></span>Collapse');
            }
        });
    </script>
    <?php
    }
    ?>

如果我尝试单击 1 个或多个按钮，它们的工作原理是每个按钮都会按预期展开/折叠并显示/隐藏其相关内容。

但是，只有单击的第一个按钮(无论第一个单击哪个按钮)的文本和字形都会从“展开”更改为“折叠”。所有其他按钮将继续显示“展开”，无论它们实际上是展开还是折叠。

我希望有人可以帮助我弄清楚如何修复它，以便其他按钮在单击时能够正确切换其文本。如果需要的话，我不介意删除上面尝试的代码。

实际输出:

预期输出:

每个按钮上的文本应与单击后的第一个按钮类似。展开/折叠功能已适用于每个按钮。

生成的 HTML/CSS 输出:
https://gist.github.com/bryanjamesmiller/c14e623152ab9b5f9246先感谢您!

Answer 1

将脚本 block 从 PHP for 循环中取出并绑定(bind)到按钮元素本身，而不是按钮 ID:

<?php for($counter = 0; $counter < 5; $counter++)
{
?>
<button type="button" class="btn btn-danger" id="<?php echo 'change_button_label_' . $counter ?>">DISLIKES<span class="glyphicon glyphicon-thumbs-down"></span></button>
<?php 
}
?>

<script>
$(document).ready(function(){       
    $('button').click(function() {
        var $button = $(this),
            test = $button.text() === 'DISLIKES';

        if(test)
        {
            $button.text('LIKE');
            test=false;
        }
        else
        {
            $button.text('DISLIKES');
            test=true;
        }
    });
});
</script>

这是非常基本的，只会更改按钮文本。要切换图标，您只需要执行以下操作:

$button.addClass('like-class');

或

$button.removeClass('dislike-class');

在适当的if block 中

看看这个 fiddle看看它的实际效果