求助：实现元素hover时显示其onclick文本的功能

嘿，我明白你现在的需求了——你有一批元素，它们的onclick文本是动态变化的，想要鼠标hover上去的时候，能显示这个onclick对应的执行结果，而且那个aFunction还不能丢，里面有不少逻辑要跑对吧？

你当前的代码问题在于，直接通过$(this).attr("onclick")拿到的只是一段函数调用的字符串（比如aFunction(xxx)），而不是aFunction执行后的返回值。下面给你几个可行的解决方案，按需选就行：

方案一：解析onclick字符串并执行函数（简单直接） #

如果你的元素onclick属性里就是标准的aFunction调用格式（比如onclick="aFunction('test')"），可以用正则提取参数后执行函数：

function aFunction(a) { 
  return `it works! ${a}`; 
}

$('.hastooltip').children("div").on('mouseover', function() {
  const onclickContent = $(this).attr("onclick");
  // 用正则匹配aFunction括号里的参数内容
  const paramMatch = onclickContent.match(/aFunction\((.*?)\)/);
  
  if (paramMatch) {
    // 解析参数并执行函数
    const result = aFunction(eval(paramMatch[1]));
    console.log(result);
    // 这里可以把结果设为tooltip，比如用title属性
    $(this).attr('title', result);
  }
});

提醒一下：eval虽然好用，但如果你的onclick内容是用户可控的，会有安全风险。要是能保证所有onclick都是合法的aFunction调用，这个方法最省事。

方案二：用自定义属性存参数（更安全清晰） #

不想碰eval的话，给元素加个自定义属性存aFunction需要的参数是更稳妥的选择：

先修改你的HTML元素，加上data-param属性：

<div class="hastooltip">
  <div onclick="aFunction('user1')" data-param="user1">按钮1</div>
  <div onclick="aFunction('user2')" data-param="user2">按钮2</div>
</div>

然后JS代码改成这样：

function aFunction(a) { 
  return `it works! ${a}`; 
}

$('.hastooltip').children("div").on('mouseover', function() {
  // 直接从自定义属性取参数
  const targetParam = $(this).data('param');
  const tooltipText = aFunction(targetParam);
  
  console.log(tooltipText);
  $(this).attr('title', tooltipText);
});

这个方法完全不用解析字符串，安全又好维护，参数复杂的时候优势更明显。

方案三：动态绑定事件时同步处理tooltip #

如果你的onclick是通过JS动态绑定的（不是写在HTML属性里的），那attr("onclick")根本拿不到内容，这时候可以在绑定点击事件的同时，直接把hover的tooltip逻辑也加上：

function aFunction(a) { 
  return `it works! ${a}`; 
}

// 假设这里是你动态生成/绑定元素的逻辑
$('.hastooltip').children("div").each(function() {
  // 这里是你的动态参数，比如从后端接口拿到的
  const dynamicParam = $(this).data('dynamic-param');
  
  // 绑定点击事件
  $(this).on('click', () => {
    return aFunction(dynamicParam);
  });
  
  // 同时绑定hover事件显示tooltip
  $(this).on('mouseover', () => {
    const tooltipText = aFunction(dynamicParam);
    console.log(tooltipText);
    $(this).attr('title', tooltipText);
  });
});

这样不管你的onclick怎么动态变化，hover的时候都能精准拿到对应的结果啦。

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