新手求助：点击jQuery按钮修改meta的content及Post Background颜色问题

看起来你是想通过点击按钮修改文章（.post）的背景色，但现有代码没命中目标元素，还存在一些冗余写法。咱们一步步拆解问题，再给出修复方案：

你的现有代码 #

Meta变量与依赖引入（HTML） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta name="color:Post Background" content="#d55246">

基础样式定义（CSS） #

#entries {
  { block: IndexPage }
    width: calc( { select: Post Size } + 42px);
  { /block: IndexPage }
  { block: PermalinkPage }
    width: 582px;
  { /block: PermalinkPage }
  margin: 0 auto;
  left: 0;
  right: 0;
  position: absolute;
  text-align: justify;
}

.post {
  background: { color: Post Background } ;
  padding: 15px 20px 20px 20px;
  border-radius: 3px;
  margin-bottom: { text: Post Margin } ;
  border: 1px solid { color: Border } ;
  { block: IndexPage }
    width: { select: Post Size } ;
  { /block: IndexPage }
  { block: PermalinkPage }
    width: 540px;
    padding-top: 20px;
  { /block: PermalinkPage }
}

点击事件逻辑（JS） #

$(document).ready(function() {
  $('#backtosafety').click(function() {
    $('#wrapper').fadeToggle('fast');
    $('body').toggleClass('toggle-control');
    $('#backtosafety').fadeOut();
    $('body').css('background-color', '#000').css('color', '#fff');
    $('body').css('text-color', '#red').css('color', '#ff0000')
    $('body') // 这里是无效的冗余代码
    $('a').css('color', '#ff0000');
  });
});

代码里的问题点 #

1. 目标元素错误：你要修改的是.post的背景色，但JS里只操作了body的样式，完全没碰.post元素，这是核心问题。
2. 无效代码干扰：JS里有一行单独的$('body')，属于无意义的冗余代码，虽然不报错但建议删掉。
3. 错误的CSS属性：text-color不是合法的CSS属性，文字颜色就是color，你后面已经设置了color: #ff0000，前面那行是多余的。

修复后的代码 #

修改后的JS逻辑（核心是添加对.post的背景色修改） #

$(document).ready(function() {
  $('#backtosafety').click(function() {
    $('#wrapper').fadeToggle('fast');
    $('body').toggleClass('toggle-control');
    $('#backtosafety').fadeOut();
    
    // 合并body的样式设置，避免重复调用css()
    $('body').css({
      'background-color': '#000',
      'color': '#ff0000'
    });
    
    // 关键：修改.post的背景颜色，替换成你想要的目标色
    $('.post').css('background-color', '#你的目标颜色');
    
    $('a').css('color', '#ff0000');
  });
});

额外优化建议（可选） #

如果想实现“切换”效果（点击按钮在初始色和新颜色之间切换），可以先保存初始的文章背景色：

$(document).ready(function() {
  // 提前保存.post的初始背景色
  const originalPostBg = $('.post').css('background-color');
  
  $('#backtosafety').click(function() {
    $('#wrapper').fadeToggle('fast');
    $('body').toggleClass('toggle-control');
    $('#backtosafety').fadeOut();
    
    $('body').css({
      'background-color': '#000',
      'color': '#ff0000'
    });
    
    // 切换.post的背景色：初始色 ↔ 深色
    $('.post').css('background-color', 
      originalPostBg === 'rgb(213, 82, 70)' ? '#333' : originalPostBg
    );
    
    $('a').css('color', '#ff0000');
  });
});

这样点击按钮时，文章的背景色就会按照你的需求正常变化了。

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