CODEWITHSUNDEEP
phpcssloops
Muhammad Ikram
Muhammad Ikram

Reputation: 95

Give different ID to each element in for loop

I have a far loop which check the number and output the result to number of that.

For exmaple, in below picture the "cut image" is displayed in multiples times. I have tag in the far loop so it outputs the image according to number of times. And that number come from database.

MY Question. Obviously all the images in first row will have same ID. Currently user can only click the first image of the row. I would like to give each element different ID if possible. Than I would like to use JQuery to add click event. So if I click on 4th image in first row, it alert message and if i click 5th image it shows different alert message.

How I can assign different ID to each element in far loop so it does only make first Image clickable but instead all elements clickable.

enter image description here

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 different ID, than I can do something like this to add clicked event to clicked image. 

jQuery( "#vinyl-roll-down-<?php echo $row['id_vnr']; ?>" ).click(function() {

But I need help assign different unique to each element in far loop.

Thanks in advance.

Upvotes: 3

Views: 2450

Answers (3)

Bibhudatta Sahoo
Bibhudatta Sahoo

Reputation: 4894

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 thigh it will help you.

Upvotes: 0

Osama
Osama

Reputation: 3040

$( ".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 in the right way and working as expected just for jquery above is the working code

Upvotes: -2

Carl0s1z
Carl0s1z

Reputation: 4723

I think your loop in PHP is okay like that. The problem lies in your jquery, try getting the right id by using use attribute 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 trying this jquery code you could advance it for your use.

Upvotes: 3

Related Questions