使用 jQuery 在 HTML 中选择模式答案

【问题标题】：Selecting a pattern within HTML with jQuery使用 jQuery 在 HTML 中选择模式
【发布时间】：2011-06-06 09:57:42
【问题描述】：

我正在尝试将旧的 Tips 插件从 Mootools 转换为 jQuery： http://flowplayer.org/tools/tooltip/index.html

一切正常，除了我在重新设置 HTML 行中属性值的样式时遇到问题。例如，我可能有：

<img src="/link/to/image.jpg" class="Tips2" title="Header Line :: Description Paragraph Here" />

效果非常好，除了我想让“标题行”部分用 CSS 风格化，而“描述段落”部分用 CSS 风格化另一种风格。我对 javascript 还很陌生，不知道如何选择这两种模式来为它们应用 css 类。

我转换的原始 Mootools 脚本带有预打包的此功能（因此您在上面的 HTML 中看到的模式已经链接到“标题行”的类“.tool-title”和“.tool- text”用于“此处的描述段落”）。

如何在 jQuery 中做到这一点？

【问题讨论】：

【解决方案1】：

这是您的想法：http://jsfiddle.net/g_thom/Za3uY/3/？

正如 Dimitar 所提到的，jQuery 将两个字符串拆分为一个数组，并将它们放入单独的 div 中以设置不同的样式。两者都在将鼠标悬停在图像上时显示。不确定这是否正是您所追求的。

我将 title 属性暂时设置为空白，这样它就不会在悬停时显示为“加倍”以及自定义工具提示，然后在鼠标移出时将其换回，这样可最大限度地减少可访问性问题。

目前已在 Chrome 和 FF4 中测试。

【讨论】：