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

我的代码几乎可以工作，但有一个问题我很难修复。这里有一些我简化了的代码。PHP foreach循环中的多个展开/折叠引导按钮

<?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个或多个按钮，它们在这个意义上，每次都会展开/折叠并显示/隐藏其相关的内容达到预期效果。

但是，只有第一个被点击的按钮（无论哪个被点击第一个按钮）都会将其文本和图形从“展开”更改为“折叠”。所有其他按钮将继续说“展开”，无论它们是否实际展开或折叠。

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

实际输出：

Actual output when all buttons are expanded

预期输出：

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

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

来源

2015-02-12 user3089840

什么是生成的HTML和JS？ – 2015-02-12 01:46:36

对不起，我将添加更多的代码 – user3089840 2015-02-12 01:51:55

当按钮全部展开时，为生成的HTML和JS添加了GIST – user3089840 2015-02-12 02:04:12

把你的脚本块了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看到它在行动

来源

2015-02-12 02:04:24 heymrcarter

它似乎正在工作。你是一个天才:)谢谢你帮助我。请注意，如果我问为什么那个“测试”变量在没有$的情况下工作？再次感谢！ – user3089840 2015-02-12 02:13:01

你只需要'$'用于PHP变量。 JavaScript变量是使用var关键字创建的，并且可以以（几乎）任何您喜欢的字符开头。 – heymrcarter 2015-02-12 02:14:18

啊哈。此外，这行代码中的逗号是什么？ var $ button = $（this）， test = $ button.text（）==='DISLIKES'; – user3089840 2015-02-12 02:18:11

变更

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

到

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

你做！

来源

2015-02-12 02:06:36

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

回答

相关问题