从php增加变量到jquery

Question

how to pass a variable to jquery with php ? i have to call the jquery from html this is what is confusing me:

jquery:

 $(document).ready(function() {
        $('#pre-info').click(function() {
                $('#hide').slideToggle("fast");
        });
    });

now i want a $i after #pre-info and after #hide.

im calling the jqueryScript like this :

thank you.

Okay, here is more code :

<?php
    $i =0;

//Make some querys nd stuff

foreach ($all as $one) {    

//Here the event 1 is createt but the pre info gets increased with each event listet
echo "<div class='EVENT'><div id='pre-info$i'>";    


// get som other tables nd stuff
echo"</div><div id='hide$i' style='display:none;'>";

//now this part is hidden until i click on the pre-info

//hidden Stuff

$i++;
}

?>

<script type="text/javascript">
$(document).ready(function() {
    $('.pre-info').click(function() {
        var hiddenid=$(this).data('hiddenid');
        $('#'+hiddenid).slideToggle(); 
    });
});
</script>

it does still not work, did i miss anything? for me it looks like pre-info in this javascript needs a reference ( $i) as well ? maybe i just dont understand the jquery completly..

Answer 1

Ok so you have several hidden divs and for each one you also have a listener to toggle their visibility. The original list comes from php which in turn gets the data from a query.

You could use data attributes to link pre-infos to hidden elements:

$i =0;
foreach ($all as $one) {    
    echo "<div class='pre-info' data-hiddenid='hide$i'>click me</div>";    
    echo "<div id='hide$i' style='display:none;'> hidden stuff </div>";
    $i++;
}

then you just need one listener on jQuery

jQuery(document).ready(function() {
    jQuery('.pre-info').click(function() {
        var hiddenid=jQuery(this).data('hiddenid');
        jQuery('#'+hiddenid).slideToggle(); 
    });
});

Hope it helps (edit, I wrapped the listener in the document ready event)

By the way, it seems to me you're reinventing the wheel. You could use jQuery UI's accordions or Bootstrap collapsibles with nice, crossbrowser transitions.