0

我在我的示例页面上突出显示了插件。它的工作原理是，你输入一个单词它会突出显示，你可以用空格分隔它并插入另一个突出显示的单词。

我的新问题对我来说看起来没有解决，例如我想要两个输入。第一个单词用一种颜色突出显示，第二个输入的单词用另一种颜色着色。

到目前为止我的情况：http: //jsfiddle.net/cfYrt/4/

html:

<body>
<input type="text" class="span1 disabled" id="field1" name="field1"><br> 

<p>
 Vestibulum rhoncus urna sed urna euismod, ut cursus eros molestie.
Nulla sed ante ut     diam gravida auctor eu quis augue. 
Donec eget diam malesuada, consectetur orci at, ultrices tellus. 
Duis id dui vel sem consequat rutrum eget non orci.
 Nullam sit amet libero odio. Vestibulum sapien sapien, 
molestie quis porta nec, sodales nec felis. 
 Mauris vehicula, erat eu consectetur viverra, 
dui tellus laoreet dolor, quis faucibus turpis eros non mi.  
</p>  
</body>

脚本：

$(function() {
$('#field1').bind('keyup change', function(ev) {
    // pull in the new value
    var searchTerm = $(this).val();

    // remove any old highlighted terms
    $('body').removeHighlight();

    // disable highlighting if empty
    if ( searchTerm ) {
        var terms = searchTerm.split(/\W+/);
       $.each(terms, function(_, term){
              // highlight the new term
        term = term.trim();
        if(term != "")
           $('body').highlight(term);
        });                          

    }
});
});

css

.highlight {
background-color: #fff34d;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3-4 */
border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
}

.highlight {
padding:1px 4px;
margin:0 -4px;
}

field2 中输入的相应值是否可以在与 field1 不同颜色的文本中着色？这个插件是否有可能，不管它是从其核心代码调用 class .highlight 吗？

4

1 回答 1

2

为此，插件的可扩展性不够。但是您可以修改插件中的某些部分并稍微更改实现。

插件改动：

jQuery.fn.highlight = function (pat, className) { //take the classname too

 //somecode
if (pos >= 0) {
   var spannode = document.createElement('span');
   spannode.className = className || 'highlight'; //set the classname as specified else default to 'highlight'

//somecode

jQuery.fn.removeHighlight = function (classNames) { //have it take the selectors to be removed either an array if multiple highligh selector removal or just pass in a single slector string.

 // some code

 var selectors = classNames;
 if(Object.prototype.toString.call(classNames) === '[object Array]')
  selectors = classNames.join(',');

//Some Code

return this.find(selectors).each(function () { //Apply to remove highlight wrapper

用法

 $('body').removeHighlight(['span.highlight1', 'span.highlight2']); //array of selector

或者

 $('body').removeHighlight('span.highlight1');

为了突出显示，请给出classname要使用的

$('body').highlight(term, 'highlight1');

演示

于 2013-06-07T21:39:10.800 回答