如何用变量值作为对象键名查询属性 并通过jQuery修改HTML内容

你写的theObjectContainingStates.["state"] == true完全无法正确获取对应值，存在语法错误和逻辑错误，具体问题和修正方案如下：

现有代码的核心错误 #

• 语法错误：JavaScript对象的属性访问，点操作符（.）和方括号操作符（[]）不能连续组合使用。点语法后必须直接写固定属性名，方括号语法才支持传入变量/表达式作为键名。
• 逻辑错误1：你在方括号里写的是字符串"state"，不是存储访客州名的state变量，就算语法正确，也只会查找键名恰好为"state"的属性，完全匹配不到Nevada、PA这类实际州名的键。
• 逻辑错误2：$.get是异步请求，你把判断逻辑写在请求回调外面的话，代码会在API还没返回州数据时就提前执行，此时state变量还未赋值，判断必然失效。
• 逻辑错误3：直接用$('.med_card_info-name')这类全局选择器，会选中页面上所有同class的三列元素，执行修改时会把三列内容全部改掉，不符合你只修改单列的要求；另外如果是图片元素，用.html()插入地址是无效的，需要修改img标签的src属性。

正确实现代码 #

// 优先读本地缓存，避免重复请求API
let userState = localStorage.getItem('state');

if (userState) {
  renderTargetColumn(userState);
} else {
  // 缓存不存在时请求API拿州信息
  $.get('https://api.geoapify.com/v1/ipinfo?&apiKey=de43045d1ab840e9b94f07dee35c6935', function(response){
    userState = response.state.name;
    localStorage.setItem('state', userState);
    renderTargetColumn(userState);
  });
}

// 抽离单列渲染逻辑
function renderTargetColumn(state) {
  // 用方括号传入state变量访问对象属性，不要加引号、不要加点
  // 建议两边统一转小写，避免大小写不一致导致匹配失败
  if (theObjectContainingStates[state.toLowerCase()] === true) {
    // 用eq()锁定要修改的列，索引从0开始：0=第一列，1=第二列，2=第三列
    const $col = $('.med_card').eq(1);
    // 只修改目标列下的对应元素，不影响其他两列
    $col.find('.med_card_info-name').text(products[1].name);
    $col.find('.med_card_info-blurb').text(products[1].blurb);
    // 修改图片地址：如果.med_card_info-image本身是img标签就去掉.find('img')
    $col.find('.med_card_info-image img').attr('src', products[1].imgSrc);
  }
}

额外注意点 #

• 如果你的州状态对象里的键是大小写混杂的（比如有的是"NV"大写，有的是"nevada"小写），建议初始化对象时就把所有键统一转成小写，判断时也把API返回的州名转成小写，彻底避免大小写匹配失败的问题。
• eq()的索引值根据你实际要修改的列调整即可，如果你能通过父容器class、id直接定位到目标列，也可以替换成对应的选择器，核心是不要全局选择所有同class元素。

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