使用jQuery在模板字面量中隐藏div失败，返回[object object]

问题根源 #

1. 模板字符串输出[object Object]：你在模板里用三元运算符直接调用$("#job-list").hide()/.show()，这两个方法返回的是jQuery对象，模板字符串会把它转成字符串输出，所以页面出现这个内容。
2. DOM元素操作时机错误：#job-list是你在模板里刚创建的，此时还没插入到页面DOM中，调用hide/show根本找不到这个元素，自然起不到效果。
3. 冗余渲染：当没有职位时，没必要先渲染整个job-list区块再隐藏，直接根据条件决定是否生成该区块更合理。

修复后的代码 #

jQuery(document).ready(function($) {
  $.getJSON('https://boards-api.greenhouse.io/v1/boards/forwardnetworks/departments', postings => {
    const targetDiv = $("#div_block-420-61456");
    const firstDept = postings.departments[0];
    const hasJobs = firstDept.jobs.length > 0;

    if (hasJobs) {
      // 有职位时渲染完整的job-list区块
      const jobHtml = firstDept.jobs.map(item => `
        <a href="${item.absolute_url}">
          <h4 class="job-title">${item.title}</h4>
        </a>
        <p class="job-descrip">${item.location.name}</p>
      `).join('');

      targetDiv.html(`
        <div id="job-list">
          <h3 class="dept">${firstDept.name}</h3>
          ${jobHtml}
        </div>
      `);
    } else {
      // 无职位时清空目标容器（或者设置提示内容）
      targetDiv.empty();
      // 如果需要保留容器但隐藏，也可以这么写：
      // targetDiv.html('<div id="job-list" style="display:none;"></div>');
    }
  });
});

关键改动说明 #

• 先提取第一个部门和职位状态变量，让逻辑更清晰
• 用if/else替代模板里的三元运算符，直接控制是否渲染job-list区块，避免无效操作
• 修复了原代码中map里<p>标签未闭合的问题
• 无职位时直接清空目标容器（也可以根据需求改成渲染隐藏的空区块，或者显示“暂无职位”的提示）

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