Show and hide all the divs which has same name

Question

Firstly, im very noob at jQuery, it is the first time that i try to use it.

I've this code in php

echo "<table><tr onclick=\" myFunction($id) \" style=\"$style\" id =\"set_\" ><td>Click</td></tr></table>";

I wanted that if i click to this tr, the myFuction function will start and the code of this function:

function myFunction(id) {

    var id = "set_";
    if (document.getElementById(id.concat(id)).style.display === "block") {
        document.getElementById(id.concat(id)).style.display = "none";
        x++;
    } else {
        document.getElementById(id.concat(id)).style.alignItems = "center";
        document.getElementById(id.concat(id)).style.display = "block";
        x--;

    }
    if (x == 0) {
        document.getElementById("table").style.visibility = "hidden";
    } else {
        document.getElementById("table").style.visibility = "visible";
    }
}

And it shows in here:

for ($x = 0; $x < $i; $x++) {
    echo "<tr>";
    echo "<td id='set_$id' style='display: none'>";
    echo $result_path[$x];
    echo "</td>";
    echo "</tr>";
}

So normally i've more than one td for some of them, but myFunction just show 1 of them. I see that i can show it via jQuery and i tried it like :

$(document).click(myFunction(req_id){
    var id = "set_";
    var id2 = id+req_id;
    $("$id2").show();
});

For now i just tried the show but i couldnt, could you please help me? Thanks.

Your `click()` binding doesn't make sense. You have defined your own `myFunction` else where, so to give it to a click handler would be `$(selector|element).click(myFunction);` but you are doing a pseudo function definition thing there, which should potentially be causing a syntax error, and at least should be doing an immediate invocation of the method giving it whatever `req_id` references, if anything. — Taplar, Aug 15 '18 at 20:00
I'm confused, what divs are you trying to hide? All I see are TD tags with your set_$id — Adam H, Aug 15 '18 at 20:00
Please edit your question to include an example of the **generated html** and the script that you are running against it so we can debug it. — Taplar, Aug 15 '18 at 20:01
`$id` doesn't change inside that for loop, so it looks like you're generating multiple elements with the same id. That won't work. id has to be unique in the document. — Don't Panic, Aug 15 '18 at 20:12
If you need multiple elements with the same identifier, class could work. — Don't Panic, Aug 15 '18 at 20:36
I wouldn't use classes, use data- attributes. so something like data-groupid="123" — Adam H, Aug 15 '18 at 20:37
my main problem is how to call a function which has an argument in jQuery? function myFunction(req_id) { code } is js and i wanted to write it in jQuery — kukuro, Aug 15 '18 at 20:41

Adam H · Answer 1 · 2018-08-15T21:27:58.287

0

Here is an implementation that is using jQuery, like you suggested in your question, as well as moving away from id's and instead using data-groupid attributes.

EDIT - Updated to support display: none

function myFunction(req_id) {
  // use jquery to find all the elements that have that same id
  $('td[data-groupid="set_' + req_id + '"]').toggle();

  // find all the visible elements in #table
  let visible = $('#table td')
                  .filter(function() { 
                            return $(this).css('display') == 'table-cell' 
                            } )
                  .length;

  // check if the length is > 0 and show the contianing table if need be. 
  if (visible)
    $('#table').show();
  else
    $('#table').hide();

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Name</th>
  </tr>
  <tr onclick=" myFunction(376) " style="cursor:hand; background: lightgrey;">
    <td><img src="thumbnails_ 376.jpg"></td>
  </tr>
  <tr onclick=" myFunction(377) " style="cursor:hand; background: lightgrey;">
    <td><img src="thumbnails_ 377.jpg"></td>
  </tr>
</table>

<table id='table' style="display: none; ">
  <tr>
    <th> Output adı:</th>
  </tr>
  <tr>
    <td data-groupid='set_376' style='display: none;'>result1_1</td>
  </tr>
  <tr>
    <td data-groupid='set_376' style='display: none;'>result1_2</td>
  </tr>
  <tr>
    <td data-groupid='set_377' style='display: none;'>result2_1</td>
</table>

edited Aug 15 '18 at 21:27

answered Aug 15 '18 at 20:41

Adam H

1,750
1
9
24

More important than just working, do you understand the differences between our code and why this works? If not let me know and I'll do my best to expand on the answer. – Adam H Aug 15 '18 at 20:44
It is also worth noting that display and visibility are different, you can look here to see a good explination of the difference between them. https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone – Adam H Aug 15 '18 at 20:46
i'll not copy paste it, because normally i just sent a little part of my code so ill try to write it and i think ill understand, ill tell you if there is any problem or not. ill tell in some minutes. – kukuro Aug 15 '18 at 20:48
Great and if this does solve your issue please remember to mark it as the answer to the question. – Adam H Aug 15 '18 at 20:55
i understood very well the difference between display and visibilty and for now i try to fix : if i click both of them firstly, then if i click the first one, it looks like "Output adi" 2 times and second id, so i wanted to delete this 2 with using display. ill tell you if i can do that or not – kukuro Aug 15 '18 at 21:01
Thanks for your helps, I fixed the problem, using $(item).hide(); and $(item).show(); e1.show() and e1.hide() didn't work, why? – kukuro Aug 15 '18 at 21:13
I saw your edit and rejected it, it would have broken the functionality. I updated the answer to support using display _instead_ of visibility. – Adam H Aug 15 '18 at 21:29
Thanks for your edit, i understood the difference, thanks a lot. – kukuro Aug 16 '18 at 08:22

Show and hide all the divs which has same name

1 Answers1