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

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

但是，只有点击的第一个按钮（并不是第一个被点击的按钮），其文本和字形将从＆＃34; expand＆＃34;到了＆＃34;崩溃。＆＃34;所有其他按钮将继续说＆＃34;扩展＆＃34;无论它们是否实际展开或折叠。

我希望有人可以帮我弄清楚如何修复它，以便其他按钮在点击时正确切换文字。如果需要，我不介意将上面尝试过的代码排除在外。

实际输出：

Actual output when all buttons are expanded

预期产出：

每个按钮上的文字应该在点击后看起来像第一个。扩展/折叠功能已经适用于每个按钮。

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

Answer 1

将您的脚本块从PHP for循环中取出并绑定到按钮元素本身，而不是按钮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块中

查看此fiddle以查看其实际效果

Answer 2

变化

if($('button span').hasClass('glyphicon-chevron-up'))

到

if($('button#<?php echo 'change_button_label_' . $counter?> span').hasClass('glyphicon-chevron-up'))

你完成了！

PHP foreach循环中的多个展开/折叠引导按钮

2 个答案: