如何通过JavaScript实现：页面含winning_bid类时隐藏price类及对应按钮？

完全可以通过JavaScript实现你的需求，以下是具体的实现代码和说明：

实现逻辑与代码 #

// 处理第一个需求：控制price类元素和winning_bid类元素的显示
const hasWinningBid = document.querySelector('.winning_bid') !== null;

if (hasWinningBid) {
  // 存在已售出商品，隐藏所有price类元素
  document.querySelectorAll('.price').forEach(el => {
    el.style.display = 'none';
  });
} else {
  // 不存在已售出商品，显示所有winning_bid类元素
  document.querySelectorAll('.winning_bid').forEach(el => {
    el.style.display = ''; // 恢复默认显示状态，也可根据实际情况设为'block'/'inline'等
  });
}

// 处理第二个需求：控制包含winning_bid的div内的指定按钮
// 假设指定按钮的选择器是`.bid-button`，可根据实际替换
const targetBtnSelector = '.bid-button';

// 隐藏已售出商品所在div内的指定按钮
document.querySelectorAll('div.winning_bid').forEach(div => {
  const btn = div.querySelector(targetBtnSelector);
  if (btn) btn.style.display = 'none';
});

// 显示未售出商品所在div内的指定按钮
document.querySelectorAll('div:not(.winning_bid)').forEach(div => {
  const btn = div.querySelector(targetBtnSelector);
  if (btn) btn.style.display = ''; // 恢复默认显示状态
});

注意事项 #

• 请根据实际页面结构替换targetBtnSelector的值，比如如果指定按钮的class是buy-btn，就改成.buy-btn；如果是特定id，就用#btn-id。
• 如果你的页面内容是动态加载的（比如通过AJAX获取商品列表），需要把这段代码放在内容加载完成后执行，比如放在DOMContentLoaded事件回调里：

document.addEventListener('DOMContentLoaded', () => {
  // 上面的核心代码放在这里
});

• 若需要更优雅的样式控制，也可以通过添加/移除CSS类来实现显示隐藏，比如定义.hidden { display: none; }，然后用el.classList.add('hidden')或el.classList.remove('hidden')替代直接修改style，这样更便于维护样式。

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