Question

我想了解一些关于简单悬停的提示，它会更改列表上方的描述内容我试图在使用之前，之后和悬停伪类时使用它，但我无法正确使用，所以我切换到Js并设法做到这一点。

HTML

<div id="description">This is an awesome content</div>

<div id="list"> 
  <span id="workfield_1" onMouseOver="changeparagraph()" onMouseOut="originalparagraph()"> Workfield_1 </span> | 
  <span id="workfield_2" onMouseOver="changeparagraph()" onMouseOut="originalparagraph()"> Workfield_2 </span> | 
  <span id="workfield_3" onMouseOver="changeparagraph()" onMouseOut="originalparagraph()"> Workfield_3 </span>
</div>

JS

const description = document.getElementById("description")

function changeparagraph() {
  switch (event.target.id) {
    case 'workfield_1': 
      description.innerHTML="A nice content about workfield_1";
      break;
    case 'workfield_2': 
      description.innerHTML="A nice content about workfield_2";
      break;
    case 'workfield_3': 
      description.innerHTML="A nice content about workfield_3";
      break;
    }
  } 

  function originalparagraph() {
    description.innerHTML="This is an awesome content";
  }

对于如何以适当的，重复性较低的方式或以不同的方式进行操作，您有什么建议吗？

提前致谢！

Answer 1

这样更好：

re.sub(r'[_\W]*', u'', string, flags=re.UNICODE)
re.compile('[_\W]*', flag=re.UNICODE ).sub(u'', string)

js：

<div id="description">This is an awesome content</div>

<div id="list"> 
  <span onMouseOver="changeparagraph('A nice content about workfield_1')" onMouseOut="originalparagraph()"> Workfield_1 </span> | 
  <span onMouseOver="changeparagraph('A nice content about workfield_2')" onMouseOut="originalparagraph()"> Workfield_2 </span> | 
  <span onMouseOver="changeparagraph('A nice content about workfield_3')" onMouseOut="originalparagraph()"> Workfield_3 </span>
</div>

jsFiddle：https://jsfiddle.net/b80jzte3/

悬停时JS事件的重构提示

1 个答案: