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

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.

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.

make sure the script tag is located at the right position in code, try to shift it above the loop

I'm not sure if that solves your problem, but try to pass the ID as parameter to your JS-functions. Then you can select by these IDs.

supposing that every cycle make a new tr, you can use something like this:

$('table').on('click','.obs_1', function() {
  $(this).hide();
  $(this).closest('tr').find('.obs_2').show();
}).on('click','.obs_2', function() {
  $(this).hide();
  $(this).closest('tr').find('.obs_1').show();
});

Obviously you can edit the code adding a class or an id to the table, to make the selector more specific :)

In this way you attach only 2 event listener to the table and on click event on obs_1 or obs_2 the script go to the parent tr and search for the other ".obs_" element, hiding himself and show his counterpart

Edit

little optimization ;)

$('table').on('click','.obs_1, .obs_2', function() {
  var other = $(this).hasClass('obs_1') ? '.obs_2' : '.obs_1';
  $(this).hide();
  $(this).closest('tr').find(other).show();
});

Edit-bis with this approach you don't need the a tag inside the td