Give different IDs to each element in a for loop
I have a far loop that checks for a number and outputs the result to the number of that.
For exmaple, at the bottom the "clipped image" image is displayed in multiples. I have a tag in the far loop, so it outputs the image according to the number of times. And that number comes from the database.
MY question. Obviously, all images in the first line will have the same ID. Currently, the user can only click the first row image. I would like to give each item a different ID if possible. Than I would like to use JQuery to add a click event. So if I click on the 4th image on the first line it is a warning message and if I click on the 5th image it shows another warning message.
How can I assign a different id to each item in the far loop so that it only makes the first click for the image, but instead all items are interactive.
My loop
<table class="table table-bordered">
<thead>
<tbody>
<tr>
<?php
for($x=0; $x < $row['noof10s_vnr']; $x++){
?>
<td><img alt="" class="yellow-process center-block " id ="cut-full-roll-<?php echo $row['id_vnr']; ?>" name="<?php echo $row['id_vnr']; ?>" src="../../css/icons/vinyl-rolls/cut.png"></td>
<?php
}
?>
</tr>
</tbody>
</table>
My jquery selector If I can give each element a different ID, then I can do something like this to add the clicked event to the clicked image.
jQuery( "#vinyl-roll-down-<?php echo $row['id_vnr']; ?>" ).click(function() {
But I need help to assign different unique ones to each item in the far loop.
Thanks in advance.
source to share
I think your PHP loop is fine. The problem is with your jquery, try to get the correct id using the use attribute of the selector attr("id")
.
jQuery( ".yellow-process" ).click(function() {
var selected = jQuery(this).attr("id");
alert(selected); // to show the selected image id
// use the variable selected to do something with it.
}
After using this jquery code, you can promote it for use.
source to share
You can try this
In html:
<table class="table table-bordered">
<thead>
<tbody>
<tr>
<?php
for($x=0; $x < $row['noof10s_vnr']; $x++){
?>
<td><img id="image{{$x}}" alt="" class="yellow-process center-block " onclick="imageClick(<?php echo $row['id_vnr']; ?>)" name="<?php echo $row['id_vnr']; ?>" src="../../css/icons/vinyl-rolls/cut.png"></td>
<?php
}
?>
</tr>
</tbody>
</table>
in jquery
function imageClick(id) {
alert(id);
var imageId = jQuery(this).attr("id");
alert(imageId);
// your code
}
I am hip, this will help you.
source to share
$( ".yellow-process" ).bind("click",function() {
var selected = $(this).attr("id");
alert(selected); // to show the selected image id
// use the variable selected to do something with it.
});
Your PHP code written correctly and working as expected, only for the jquery above is working code
source to share