循环中如何定位单个类？解决PHP文章循环按钮批量触发问题

看起来你遇到的问题是因为所有展开/收起按钮和容器都用了相同的类名，没有区分每篇文章的独立实例，所以点击一个按钮会触发所有相关元素对吧？我来给你调整一下代码，让每个按钮只对应自己文章的容器：

第一步：修改PHP循环中的HTML代码 #

在文章循环里，我们可以利用文章的唯一ID（比如你项目里的文章ID变量，WordPress里常用get_the_ID()）给按钮和容器添加data-post-id属性，生成唯一标识：

<?php while (have_posts()) : the_post(); // 这里是你的文章循环逻辑 ?>
<div class="col-sm-1 ">
  <span class="btn btn-sm album-song">
    <a class="btn btn-sm show-album-song" data-post-id="<?php echo get_the_ID(); ?>">&#8897;</a>
    <a class="btn btn-sm hide-album-song" data-post-id="<?php echo get_the_ID(); ?>" style="display:none;">&#8896;</a>
  </span>
</div>
<div class="container album-songs-show-hide" data-post-id="<?php echo get_the_ID(); ?>">
  <div class="row">
    <div class="col-sm-4 name"><?php // 这里是你的歌曲内容输出 ?></div>
  </div>
</div>
<?php endwhile; ?>

注：给收起按钮加了style="display:none;"，保证初始状态下只显示展开按钮

第二步：修改JavaScript事件绑定 #

接下来让每个按钮只触发对应文章ID的容器，这里提供两种实现方式：

jQuery版本 #

// 展开按钮点击事件
$('.show-album-song').on('click', function(e) {
  e.preventDefault();
  const postId = $(this).data('post-id');
  // 只操作当前文章对应的元素
  $(`.album-songs-show-hide[data-post-id="${postId}"]`).show();
  $(this).hide();
  $(`.hide-album-song[data-post-id="${postId}"]`).show();
});

// 收起按钮点击事件
$('.hide-album-song').on('click', function(e) {
  e.preventDefault();
  const postId = $(this).data('post-id');
  // 只操作当前文章对应的元素
  $(`.album-songs-show-hide[data-post-id="${postId}"]`).hide();
  $(this).hide();
  $(`.show-album-song[data-post-id="${postId}"]`).show();
});

原生JavaScript版本 #

// 绑定展开按钮事件
document.querySelectorAll('.show-album-song').forEach(btn => {
  btn.addEventListener('click', (e) => {
    e.preventDefault();
    const postId = btn.dataset.postId;
    const targetContainer = document.querySelector(`.album-songs-show-hide[data-post-id="${postId}"]`);
    const hideBtn = document.querySelector(`.hide-album-song[data-post-id="${postId}"]`);
    
    targetContainer.style.display = 'block';
    btn.style.display = 'none';
    hideBtn.style.display = 'inline-block';
  });
});

// 绑定收起按钮事件
document.querySelectorAll('.hide-album-song').forEach(btn => {
  btn.addEventListener('click', (e) => {
    e.preventDefault();
    const postId = btn.dataset.postId;
    const targetContainer = document.querySelector(`.album-songs-show-hide[data-post-id="${postId}"]`);
    const showBtn = document.querySelector(`.show-album-song[data-post-id="${postId}"]`);
    
    targetContainer.style.display = 'none';
    btn.style.display = 'none';
    showBtn.style.display = 'inline-block';
  });
});

这样修改后，每篇文章的按钮和容器就都是独立的了，点击其中一个只会触发对应文章的内容，不会影响其他文章的元素。

内容的提问来源于stack exchange，提问作者Fisnik