jquery click function inside a php loop - php

Question

I have a foreach loop in php like below.
<?php
$i = 0;
foreach ($query as $value) { ?>
<button id="show[<?php echo $i;?>]" class="btn btn-success" type="button">View</button>
<div id="blah[<?php echo $i;?>]">Joel</div>
<?php
$i++
} ?>
Now this loop work fine and I am getting id for each buttons and divs with unique id. But I want to add a jquery click function like below.
$("#show").click(function(){
$("blah").hide();
});
But since it is inside a loop and have different id's with them how to add this jquery function for each buttons?

Answer 1

$(".btn").click(function(){
var id = $(this).attr('id');
var n = id.replace("show",'');
$("#blah"+n).hide();
});
Also replace your buttons with this code
<button id="show-<?php echo $i;?>" class="btn btn-success" type="button">Clear</button>
<div id="blah-<?php echo $i;?>">Joel</div>

Answer 2

for php:
<?php foreach ($query as $key => $value) {?>
<button class="btn btn-success blah-toggler" type="button" data-target="blah-<?php echo $key ?>">
<div id="blah-<?php echo $key ?>">Joel</div>
<?php }?>
then in jquery:
$(".blah-toggler").on("click", function(){
var t = $(this);
$('#' + t.data('target')).hide();
});

Answer 3

Use a class
<button id="show[<?php echo $i;?>]" class="btn btn-success mybutton" type="button">
Then
$(".mybutton").click(function(){
$("blah").hide();
});

Answer 4

Alternatively you could also use a class. Then the usual:
<?php $i = 0; ?>
<?php foreach ($query as $value): ?>
<button class="btn btn-success toggle" type="button">
<div id="blah[<?php echo $i;?>]">Joel</div>
</button> <!-- missed a closing button tag -->
<?php $i++; ?>
<?php endforeach; ?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.toggle').on('click', function(){
$(this).children('div').hide();
});
});
</script>

Answer 5

u should use following
PHP:
<?php
$i = 0;
foreach ($query as $value) { ?>
<button id="show[<?php echo $i;?>]" class="btn btn-success clickEvent" type="button">
<div id="blah[<?php echo $i;?>]">Joel</div>
<?php
$i++
} ?>
Here you are adding class="clickEvent" for the buttons . And At the end u will have jScript file with following content .which will take care what should happen , when the button with that class is clicked.
jQuery:
$(".clickEvent").click(function(){
$(this).next('div').hide();
});

Answer 6

PHP:
<?php
$i = 0;
foreach ($query as $value) { ?>
<button id="show_<?php echo $i;?>" onclick=show(this.id) class="btn btn-success" type="button">
<div id="blah_<?php echo $i;?>">Joel</div>
<?php
$i++
} ?>
javascript:
function show(id)
{
var arr = id.split('_');
$("#blah_"+arr[1]).hide("slow");
}