特定于所选清单的Onclick显示隐藏的Div

Question

I have a list of data which is collected from the database.

I have added a Div with a "Read More" label and another div which holds the content and is hidden.

When the user clicks on the "read More" text the Content div with show up.

Here is my current code below:

<script>
    $(document).ready(function(){

        $(".readmore").click(function() {
            $('.readmecontent').show();
        });
    });
</script>

//THE HTML .. Note: Content will be added via php but hardcoded now ...

echo '<div class="readmore">Read more...</div>';
echo '<div class="readmecontent" style="display:none;">Read Me Content Here</div>';

All the above works but the problem is that the "readmore" class currently opens all "readmecontent" classes.

I need it to just show the "readmecontent" DIV that applies to the "readmore" class that has been clicked.

I cannot use ID's because the listing is created dynamially.

How can I do this?

Answer 1

使用的实例， this找到下一个元素：

$(this).next('.readmecontent').show();

Answer 2

this solution doesn't need you to hold an instance

$(".readmore").click(function() {
    $('.readmecontent:not(.readmecontent.visible)').eq(0).show().addClass('visible');
});