你在循环中如何定位一个类？

Question

All the PHP code is in the post loop so when adding a new post it gets also the buttons and when pressing one button it opens all buttons and containers

<div class="col-sm-1 ">
        <span class="btn btn-sm album-song">
            <a class="btn btn-sm show-album-song">&#8897;</a>
            <a class="btn btn-sm hide-album-song">&#8896;</a>
        </span>
    </div>

<div class="container album-songs-show-hide">
    <div class="row">
        <div class="col-sm-4 name"><?php _e('Song Name', 'koband');?></div>
        <div class="col-sm-4"><?php _e('Song Length', 'koband');?></div>
        <div class="col-sm-4"><?php _e('Song Details', 'koband');?></div>
    </div>
    <div class="row" style="background-color: #d6d6d6; border-bottom: 1px solid #000;">         
    <?php foreach ($album_song_details[0] as  $value_song_details) { ?>
        <div class="col-sm-4"><?php echo $value_song_details['name-details']; ?></div>
        <div class="col-sm-4"><?php echo $value_song_details['length']; ?></div>
        <div class="col-sm-4"><?php echo $value_song_details['detail']; ?></div>

        <?php } ?> 
    </div>
</div>

and the jQuery code goes here

$(".album-songs-show-hide").hide();
$(".hide-album-song").hide();
$(".show-album-song").click(function(){
    $(this).find(".album-songs-show-hide").slideDown(1000);// show container elements 
    $(".show-album-song").hide(); // button down hide
    $(".hide-album-song").show(); // button up show

});

Answer 1

Thanks to all for commenting solutions but for me this was the working solution for you

$(".album-songs-show-hide").hide();
$(".hide-album-song").hide();
$(".show-album-song").click(function(){
    $(this).closest("div.container").find(".album-songs-show-hide").slideDown(1000);// hide container elemnts 
    $(".show-album-song").hide(); // button down hide
    $(".hide-album-song").show(); // button up show

});