如何传递一个PHP id来创建两个bootstrap button diffrent id并将其用于jquery functin？

Question

<?php
    include_once('config.php');
    $sql="SELECT * FROM events";                                                         
    $result = mysqli_query($con,$sql);
    if(!$result)
    {
     echo "no record found";
    }
    else
    {                                                                   
        while ($row =mysqli_fetch_assoc($result))
        {
         $e_id=$row['e_id'];         
    ?>
                    <?php 
                        $_SESSION['r']=$e_id."rr";
                        $_SESSION['l']=$e_id."ll";
                    ?>
                <p>
                    <a class="btn btn-default" id="<?php echo $_SESSION['r']; ?>" role="button" data-toggle="collapse" href="#<?php echo  $e_id; ?>" aria-expanded="false" aria-controls="<?php echo  $e_id; ?>">View More &raquo;</a>
                    <a class="btn btn-default" id="<?php echo  $_SESSION['l']; ?>" role="button" data-toggle="collapse" href="#<?php echo  $e_id; ?>" aria-expanded="false" aria-controls="<?php echo  $e_id; ?>">View Less &laquo;</a></br>
                </p>



                 <script>
                 var l = "<?php echo $_SESSION['l'];?>";
                 var r = "<?php echo $_SESSION['r'];?>";
                 alert(r);
                    $(document).ready(function(){
                      $("#"+r).show();
                      $("#"+l).hide();

                      $("#"+l).click(function(){
                        $("#"+l).hide();
                        $("#"+r).show();
                      });

                      $("#"+r).click(function(){
                        $("#"+r).hide();
                        $("#"+l).show();
                      });
                     });
                 </script>


<?php        
        }//while

    }//else 
 ?>

I fetch data $e_id from database then use it to create two buttons with added char to differ rr and ll as their id's then store in session. Now how to use it in jquery to show/hide each one. data-toggle on button is different div works fine. If i alert(r) gives 1rr 2rr 3rr, and alert(l) 1ll 2ll 3ll. I have 1,2,3 as id in database how can i use this button id's in script. session_start() was on top of page. The problem is hide/show not working guess I'm doing wrong. How can I call that id's properly?

Answer 1

You can do it this way. The script is outside the loop. I can also add in a non jquery version in a bit as well if you want.

<?php
include_once('config.php');

$sql = "SELECT * FROM events";
$result = mysqli_query($con, $sql);

if(!$result)
    exit('no record found');

while($row = mysqli_fetch_assoc($result)) { ?>
    <p>
        <a class="btn btn-default button-right" id="e-left-<?=$row['e_id']; ?>" data-id="<?=$row['e_id']; ?>" role="button" data-toggle="collapse" href="#<?=$row['e_id']; ?>" aria-expanded="false" aria-controls="<?=$row['e_id']; ?>">View More &raquo;</a>
        <a class="btn btn-default button-left" id="e-right-<?=$row['e_id']; ?>" data-id="<?=$row['e_id']; ?>" role="button" data-toggle="collapse" href="#<?=$row['e_id']; ?>" aria-expanded="false" aria-controls="<?=$row['e_id']; ?>">View Less &laquo;</a></br>
    </p>
<?php } ?>

<script>
    $(document).ready(function() {

        $('.button-right').each(function() { 

            $(this).show(); 

            $(this).click(function() {
                $(this).hide();
                $('#e-left-'+this.dataset.id).show();
            }); 
        });

        $('.button-left').each(function() {

            $(this).hide();

            $(this).click(function() {
                $(this).hide();
                $('#e-right-'+this.dataset.id).show();
            }); 
        });
     });
</script>