Question

我一直在一个网站上工作，该网站突出显示一个藏语词组，当用户将鼠标悬停在它上面时，它就会反对。这一点jquery可以用来完成这个函数jsfiddle example of working code。

<p><span title="extensive">ཆེན་པོ་</span><span title="Entering the Middle Way">དབུ་མ་ལ་འཇུག་པའི་        </span><span title="explanation">རྣམ་བཤད་</span><span title="The Illumination of the         True Thought">དགོངས་པ་རབ་གསལ་</span> <span title="Here begins">བཞུགས་སོ</span>་།།</p>

<p><span title="བཞུགས་">Here begins</span> <span title="དགོངས་པ་རབ་གསལ་">The Illumination of the True Thought</span>, an <span title="ཆེན་པོ་">extensive</span> <span title="རྣམ་བཤད་">explanation</span> of <span title="དབུ་མ་ལ་འཇུག་པའི་">Entering the Middle Way</span>.</p>

但是，当我需要格式化文本，粗体或更改字体大小时，jsfiddle example of nonworking code嵌套跨度似乎会产生冲突，并且高亮显示功能将无法正常工作。

<p><span style="font-size: 24px;"><span title="extensive">ཆེན་པོ་</span> <span title="Entering the Middle Way">དབུ་མ་ལ་འཇུག་པའི་</span> <span title="explanation">རྣམ་བཤད་</span> <span title="The Illumination of the True Thought">དགོངས་པ་རབ་གསལ་</span> <span title="Here begins">བཞུགས་སོ</span>་།།</span></p>

<p><span style="font-size: 20px;"><span title="བཞུགས་">Here begins</span> <span title="དགོངས་པ་རབ་གསལ་">The Illumination of the True Thought</span>, an <span title="ཆེན་པོ་">extensive</span> <span title="རྣམ་བཤད་">explanation</span> of <span title="དབུ་མ་ལ་འཇུག་པའི་">Entering the Middle Way</span>.<span></p>

关于如何解决这个问题的任何想法。最终，我想实现wordpress quicktag或短代码，甚至可能创建一个插件来处理这个，但我没有PHP的工作知识。

非常感谢任何帮助！

谢谢， vajra108

Answer 1

嗯，问题是你是否正在筑巢。在下面的代码中，您将定位包含所需文本的范围并突出显示它，但您可以看到样式范围还包含所有文本，因此它突出显示样式范围。

 $('span:contains("' + $(this).attr('title') + '")').addClass('highlight');

您可以做的是，您可以删除样式范围并改为设置样式（的 Fiddle ）。

注意：避免使用内联css。

Answer 2

您需要将:contains搜索限制为仅包含文本的span元素，而不是用于格式化的span元素。在你的非工作jsFiddle中，只需将[title]添加到它们中就可以实现这一点：

$('span[title]:contains("'+$(this).attr('title')+'")').addClass('highlight');
    },
    function() {
        $(this).removeClass('highlight');
        $('span[title]:contains("'+$(this).attr('title')+'")').removeClass('highlight');
    }
);

但是，我可能会建议您实际使用类名来制定不太脆弱的规范。这样，您只需要搜索您想要搜索的span元素，而不是其他元素。

修改演示：http://jsfiddle.net/jfriend00/cj2G5/

仅供参考，如果您使用类名和CSS进行格式化而不是使用CSS样式的内联span标记，那么整个问题就会变得不那么复杂。

嵌套跨度元素影响格式和JS输出

2 个答案: