Use jQuery .click() function with an individual element

Question

I want to show the list of tags on an Tumblr blog only when the user clicks on the tags button. For that I use this HTML and jQuery.

HTML

  <span class="tags-link">Tags</span>
  <ul class="tags">
    <li> <a href="{TagURL}">{Tag}</a> </li>
  </ul>

jQuery

$(document).ready(function(){
    $(".tags-link").click(function() {
        $(".tags").slideDown(700, function(){
            //end animation
        });
    });
});

Every time I click on the .tags-link every .tags shows up on the page, and I only want the ones of the post where the user has clicked to be shown. I recently started learning jQuery and I'm a little lost here...

Answer 1

你可以使用.next() http://api.jquery.com/next/

$(this).next(".tags").slideDown(700, function(){

Answer 2

You need to target the tags that is the next adjacent element only:

$(document).ready(function(){
    $(".tags-link").click(function() {
        $(this).next(".tags").slideDown(700, function(){
            //end animation
        });
    });
});

Answer 3

You can set a data attribute on both the span with class "tags-link" and the ul with class "tags". Then when you click the ".tags-link" element, it will show the ".tags" element with the same data attribute.

For example:

HTML

<span class="tags-link" data-id="1">Tags</span>
<ul class="tags" data-id="1">
  <li> <a href="{TagURL}">{Tag}</a> </li>
</ul>

jQuery

$(document).ready(function(){
    $(".tags-link").click(function() {
        var id = $(this).attr('data-id');
        $(".tags[data-id='" + id + "']").slideDown(700, function(){
            //end animation
        });
    });
});