Programmer Programmer - 4 months ago 12
Javascript Question

How To Know Which Link Clicked [jQuery]

I have created a webpage and i have a comment section in it , then i added a button that used for viewing the reply of the comments and when i click on the button that to show the reply , the button shows all the replays of the comments !

HTML

<div dir="auto" class="usercomment">
<content>
<div class="usercommentcontent">
<a href="" class="deletecommentbutton">×</a>
<table>
<tr>
<td><img id="usercommentimage" src="img/user.jpg"></td><td class="usercommentusername">david jacson</td>
</tr>
</table>
<br><div dir="auto" class="usercommentmsg">Thank You Very Much Bro.</div>
<a class="tooltips viewreplycommentbutton" title="Black">+<span>See Replys</span></a>
<div class="reply">
<table>
<tr>
<td><img id="usercommentimage" src="img/user.jpg"></td><td class="usercommentusername">Michael Walson</td>
</tr>
</table>
<br><div dir="auto" class="usercommentmsg">Thanks.</div>
</div>
<div class="reply">
<table>
<tr>
<td><img id="usercommentimage" src="img/user.jpg"></td><td class="usercommentusername">Michael Walson</td>
</tr>
</table>
<br><div dir="auto" class="usercommentmsg">Thanks.</div>
</div>
<br>
</content>
</div>
</div>


jQuery

$('.viewreplycommentbutton').click(function(){
$('.reply').slideToggle(200);
});


i want to be it , when i click the button of view the replys of specific comment , only the specific comment show the replys ( not all comments view the replys ! ).

Answer

You need to use this to refer to the element being clicked and then traverse the DOM from there. Also note that IDs must be unique:

$('.viewreplycommentbutton').click(function() {
  $(this).next('.reply').slideToggle(200);
});

$('.viewreplycommentbutton').click(function() {
  $(this).next('.reply').slideToggle(200);
});
.reply {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div dir="auto" class="usercomment">
  <content>
    <div class="usercommentcontent">
      <a href="" class="deletecommentbutton">×</a>
      <table>
        <tr>
          <td>
            <img id="usercommentimage" src="img/user.jpg">
          </td>
          <td class="usercommentusername">david jacson</td>
        </tr>
      </table>
      <br>
      <div dir="auto" class="usercommentmsg">Thank You Very Much Bro.</div>
      <a class="tooltips viewreplycommentbutton" title="Black">+<span>See Replys</span></a>
      <div class="reply">
        <table>
          <tr>
            <td>
              <img id="usercommentimage" src="img/user.jpg">
            </td>
            <td class="usercommentusername">Michael Walson</td>
          </tr>
        </table>
        <br>
        <div dir="auto" class="usercommentmsg">Thanks.</div>
      </div>
      <div class="reply">
        <table>
          <tr>
            <td>
              <img id="usercommentimage" src="img/user.jpg">
            </td>
            <td class="usercommentusername">Michael Walson</td>
          </tr>
        </table>
        <br>
        <div dir="auto" class="usercommentmsg">Thanks.</div>
      </div>
      <br>
  </content>
  </div>
</div>
<div dir="auto" class="usercomment">
  <content>
    <div class="usercommentcontent">
      <a href="" class="deletecommentbutton">×</a>
      <table>
        <tr>
          <td>
            <img id="usercommentimage" src="img/user.jpg">
          </td>
          <td class="usercommentusername">david jacson</td>
        </tr>
      </table>
      <br>
      <div dir="auto" class="usercommentmsg">Thank You Very Much Bro.</div>
      <a class="tooltips viewreplycommentbutton" title="Black">+<span>See Replys</span></a>
      <div class="reply">
        <table>
          <tr>
            <td>
              <img id="usercommentimage" src="img/user.jpg">
            </td>
            <td class="usercommentusername">Michael Walson</td>
          </tr>
        </table>
        <br>
        <div dir="auto" class="usercommentmsg">Thanks.</div>
      </div>
      <div class="reply">
        <table>
          <tr>
            <td>
              <img id="usercommentimage" src="img/user.jpg">
            </td>
            <td class="usercommentusername">Michael Walson</td>
          </tr>
        </table>
        <br>
        <div dir="auto" class="usercommentmsg">Thanks.</div>
      </div>
      <br>
  </content>
  </div>
</div>