jQuery $this and find selectors not working properly

Question

I have an onclick function inside for loop in PHP. I want to show particular DIV when I click on particular onclick function.

These are my codes.

This is PHP code

for($i = 1; $i < 10; $i++)
{
    echo '<a href onclick="get_number($i)">Get Number</a>';
    echo '<div class="ans_option_box" style="display:none">show this div</div>';
    echo '<br>';
}

This is jQuery code

<script>
function get_number(id)
{
     $(this).find('.ans_option_box').show();
}
</script>

I really want, when I click on 5th onclick value. DIV should appear under 5th value. Thanks in advance!

You need double quotes `"` around the PHP string to interpolate `$i`. — 4castle, Oct 31 '16 at 18:24
Use `button` elements instead of `a`, or try to control the click event in the script to prevent default, because when you click on the `a`, the page will be reloaded and you won't see any div. — nanocv, Oct 31 '16 at 18:27
Hi, PHP code is not a problem. My problem is jquery one. that is not really PHP code I am using. I have put that only to get an idea. I really want, when I click on 5th onclick value. DIV should appear under 5th value like that — Henry Laroll, Oct 31 '16 at 18:27
@nanocv - function is working, if I put an alert inside it, it is working, but div particular div show function is not working. If I remove this selector, it will show all divs — Henry Laroll, Oct 31 '16 at 18:30
do you know the difference between clientside and serverside functions? Your *"I have put that only to get an idea"* is throwing people off here and doesn't support the question. — Funk Forty Niner, Oct 31 '16 at 19:11

score 0 · Answer 1 · answered Oct 31 '16 at 18:38

0

The div you want to show isn't a child of the <a> tag, so find() won't work. You will have to change your html or use a different jQuery function.

And you need to change echo '<a href onclick="get_number($i)">Get Number</a>'; to echo '<a href onclick="get_number(' . $i . ')">Get Number</a>'; to actually have php output the number.

answered Oct 31 '16 at 18:38

Jaime

1,402
7
15

Hi, PHP code is not a problem. My problem is jquery one. that is not really PHP code I am using. I have put that only to get an idea. I really want, when I click on 5th onclick value. DIV should appear under 5th value like that – Henry Laroll Oct 31 '16 at 18:42

score 0 · Answer 2 · answered Oct 31 '16 at 19:09

Here you have it working. You have to change the PHP code to display $i correctly.

Also, I changed the jQuery selector to search items by id, because it's easier and much more efficient.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page</title>
  </head>
  <body>

    <?php
    for ($i = 1; $i < 10; $i++) {
      echo '<button onclick="get_number(' . $i . ')">Get Number</button>';
      echo '<div id="' . $i . '" class="ans_option_box" style="display:none">show this div</div>';
      echo '<br>';
    }
    ?>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
      function get_number(id)
      {
        $("#"+id).show();
      }
    </script>
  </body>
</html>

jQuery $this and find selectors not working properly

2 Answers2