PHP while循环和使用javascript / Jquery与循环内的不同元素相关联

Question

As far as I got with my application, I failed to use javascript when I am using PHP while loops. I can`t find a simple answer, or I am stupid enough to don't see the answer.

We all know that while loops returns many results and takes apart each new element by recognising it after his own identification element ( ID from database, for example).

I have the code:

<?php while ($row = mysqli_fetch_array($query)) 
      {
         echo "<td><input type='hidden' value='$row[0]' /></td>"; // here I take individually, each element ID from DB.
         echo "<td><span class='obs_1'>" . $row[4] . " <a href='javascript: show_comment()'>(show obs_2 and hide obs_1)</a></span></td>";
         echo "<td><span class='obs_2' style='display: none;'>" . $row[7] . " <a href='javascript: hide_comment()'>(show obs_1 and hide obs_2)</a></span></td>";
      }

Javascript:

<script>
function show_comment()
     {
         $('.obs_1').hide();
         $('.obs_2').show();
     }

function hide_comment()
     {
         $('.obs_2').hide();
         $('.obs_1').show();
     }
</script>

When you click on show_comment, obs_1 span must disappear and obs_2 span must be shown for each new element ID. The opposite thing for obs_2.

I need to assign that ID (value $row[0]) to the classes obs_1 and obs_2 and I can't manage to do that, in order to show the right obs_2 and hide obs_1 for each new element ID.

I have trouble finding answers when it comes to use javascript in PHP while loops.

Answer 1

I you use jQuery, you could use [data-id]. For instance in your case:

<?php while ($row = mysqli_fetch_array($query)) 
      {
         echo "<td><input type='hidden' value='$row[0]' /></td>"; // here I take individually, each element ID from DB.
         echo "<td><span class='obs_1' data-id='".$row[0]."'>" . $row[4] . " <a href='javascript: show_comment()'>(show obs_2 and hide obs_1)</a></span></td>";
         echo "<td><span class='obs_2' data-id='".$row[0]."' style='display: none;'>" . $row[7] . " <a href='javascript: hide_comment()'>(show obs_1 and hide obs_2)</a></span></td>";
      }

So after that in jQuery you can find the right span to hide or show:

    jQuery(".obs_1").on('click' ,function(event){
var id = $(this).attr("data-id");
$('.obs_1[data-id="'+id+'"]').hide();
$('.obs_2[data-id="'+id+'"]').show();
});

This way anytime you click on a .obs_2 class you will have the right behavior only for the particular data-id elements.