如何通过条件语句正确切换innerHTML？现有代码初始有效后续失效

嘿，我来帮你捋捋这个问题～首先得揪出你代码里的核心bug：你在if判断里用了赋值运算符=，而不是比较运算符===（或==）。这就导致每次点击都会先把innerHTML强制赋值为"- Professional Summary"，然后这个赋值表达式的结果会被当作true，所以每次都会执行if块里的代码，把文本改成"+ Professional Summary"，完全没法实现切换逻辑。

接下来给你几种正确的实现方式，从修复原代码到更优雅的jQuery写法：

方式一：修复原代码的比较逻辑 #

把赋值改成严格比较，同时统一用jQuery语法（既然已经引入了jQuery，没必要混用原生JS的getElementById，既冗余又容易出错）：

$('#summary-head').click(function(evt) {
  evt.preventDefault();
  const $head = $(this); // 缓存jQuery对象，避免重复DOM查找
  $('#summary-bod').slideToggle(1000);
  $head.toggleClass('close');
  
  // 用严格比较判断当前文本内容
  if ($head.html() === "- Professional Summary") {
    $head.html("+ Professional Summary");
  } else {
    $head.html("- Professional Summary");
  }
});

方式二：利用toggleClass的状态判断（更可靠） #

既然你已经在切换close类，不如直接根据这个类的存在状态来切换文本——这种方式不依赖文本内容，就算后续标题文本修改，切换逻辑也不会失效：

$('#summary-head').click(function(evt) {
  evt.preventDefault();
  const $head = $(this);
  // 把文本切换放在slideToggle的回调里，等动画完成后再更新，体验更流畅
  $('#summary-bod').slideToggle(1000, function() {
    if ($head.hasClass('close')) {
      $head.html("+ Professional Summary");
    } else {
      $head.html("- Professional Summary");
    }
  });
  $head.toggleClass('close');
});

方式三：更紧凑的三元表达式写法 #

如果想让代码更简洁，可以用三元表达式简化判断逻辑：

$('#summary-head').click(function(evt) {
  evt.preventDefault();
  const $head = $(this);
  $('#summary-bod').slideToggle(1000);
  $head.toggleClass('close');
  
  // 一行代码完成文本切换
  $head.html(
    $head.hasClass('close') 
      ? "+ Professional Summary" 
      : "- Professional Summary"
  );
});

额外小技巧： #

如果只是切换开头的符号，也可以只修改符号部分，不用替换整个文本，这样后续标题内容变动时不用改这段逻辑：

const currentText = $head.text();
$head.text(
  currentText.startsWith('-') 
    ? currentText.replace('-', '+') 
    : currentText.replace('+', '-')
);

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