如何用jQuery显示名称为字符串变量结果的区块？.find()能否接收变量？

当然可以啦！jQuery的.find()方法本身就支持接收字符串类型的变量作为选择器参数——因为它本质上就是接受一个CSS选择器字符串，不管这个字符串是直接写死的字面量，还是存在变量里的内容，只要格式合法，都能正常工作。

结合你给出的代码来看，你已经在点击不同按钮时给className变量赋值了对应的类选择器，接下来只需要用这个变量去查找并显示目标DOM区块就行。我帮你完善了代码，实现点击按钮后展示对应区块的功能：

var className;

// 绑定各角色按钮的点击事件
$('.game--test').find('.assault--test').click(function(){
  className = '.assault-res';
  toggleResultBlock();
});

$('.game--test').find('.medic--test').click(function(){
  className = '.medic-res';
  toggleResultBlock();
});

$('.game--test').find('.gunner--test').click(function(){
  className = '.gunner-res';
  toggleResultBlock();
});

$('.game--test').find('.radioman--test').click(function(){
  className = '.radioman-res'; // 补全你未写完的赋值逻辑
  toggleResultBlock();
});

// 封装切换结果区块显示的函数
function toggleResultBlock() {
  // 先隐藏所有结果区块（可选，根据你的需求调整）
  $('.game--test').find('[class$="-res"]').hide();
  // 使用变量作为选择器，找到目标区块并显示
  $('.game--test').find(className).show();
}

额外优化建议： #

为了避免重复写四次几乎一样的点击事件，你可以通过类名的规律来统一绑定事件，代码会更简洁易维护：

// 匹配所有以"--test"结尾的按钮
$('.game--test').find('[class$="--test"]').click(function(){
  // 从当前按钮的类名中提取角色标识
  var roleName = $(this).attr('class').match(/(\w+)--test/)[1];
  // 动态生成对应的结果区块选择器
  className = '.' + roleName + '-res';
  toggleResultBlock();
});

function toggleResultBlock() {
  $('.game--test').find('[class$="-res"]').hide();
  $('.game--test').find(className).show();
}

核心逻辑总结：.find()的参数只要是合法的CSS选择器字符串，不管是直接字面量还是变量存储的内容，都能正确定位到元素。你之前的思路完全没问题，只是缺了最后用变量查找并显示目标区块的那一步~

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