在class-it.js中将类添加到jQuery Highlight Effect

Question

我想在tag-it.js中添加一个类，以便突出显示效果影响我的整个元素。

Tag-it is a jQuery UI plugin当您尝试两次输入相同标签时使用突出显示效果。它运行正常，但是为了在标签前面加上一个正方形，我改变了标签的样式，如下所示：

ul.tagit li.tagit-choice:before {
  content:"";
  float:left;
  position:absolute;
  top:0;
  left:-12px;
  border-color:transparent #6e92c7 transparent transparent;
  border-style:solid;
  border-width:12px 12px 12px 0;  
}

现在，突出显示效果会影响我的标签正文。所以我试图在tag-it.js中找到高亮效果初始化的位置，我找到了这些行：

if (!this.options.allowDuplicates && !this._isNew(value)) {
    var existingTag = this._findTagByLabel(value);
    if (this._trigger('onTagExists', null, {
        existingTag: existingTag,
        duringInitialization: duringInitialization
    }) !== false) {
        if (this._effectExists('highlight')) {
            existingTag.effect('highlight', {color:"#ff6666"});
        }
    }
    return false;
}

我试图改变它，但遗憾的是我没有尝试过任何工作:(这是我的一次尝试：

if (!this.options.allowDuplicates && !this._isNew(value)) {
    var existingTag = this._findTagByLabel(value);
    // my added line
    var existingTagbefore =  this._findTagByLabel('ul.tagit li.tagit-choice:before');
    if (this._trigger('onTagExists', null, {
        existingTag: existingTag,
        duringInitialization: duringInitialization
    }) !== false) {
        if (this._effectExists('highlight')) {
            existingTag.effect('highlight', {color:"#ff6666"});
            // my added line
            existingTagbefore.effect('highligh', {color:"#ff6666"});
        }
    }
    return false;
}

以下是一个工作示例：（尝试编写例如2 x PHP | Enter = delimiter）

$(function() {
    var availableTags = [
        "SEO", "PHP", "MySQL",
    ];
    //-------------------------------
    // Allow spaces without quotes.
    //-------------------------------
    $('#allowSpacesTags').tagit({
        allowSpaces: true,
        fieldName: 'tags[]',
        autocomplete: {
            source: availableTags,
        }
    });
});

ul.tagit {
	padding: 1px 5px 1px 5px;
	line-height: 1em;
	overflow: auto;
	margin-left: inherit; /* usually we don't want the regular ul margins. */
	margin-right: inherit;
	background: inherit;
	border:solid #C6C6C6 1px;
	background-color: #FFF;
}
ul.tagit li {
	display: block;
	float: left;
	margin: 4px 10px 4px 13px;
}
ul.tagit li.tagit-choice {    
	position: relative;
	line-height: inherit;
	height: 20px;
  -moz-border-radius-bottomright:4px;
  -webkit-border-bottom-right-radius:4px; 
  border-bottom-right-radius:4px;
  -moz-border-radius-topright:4px;
  -webkit-border-top-right-radius:4px;  
  border-top-right-radius:4px;  
  background:#6e92c7;
}
ul.tagit li.tagit-choice:before {
	content:"";
  float:left;
  position:absolute;
  top:0;
  left:-12px;
  width:0;
  height:0;
  border-color:transparent #6e92c7 transparent transparent;
  border-style:solid;
  border-width:12px 12px 12px 0;  
}
ul.tagit li.tagit-choice:after {
	content:"";
  position:absolute;
  top:10px;
  left:0;
  float:left;
  width:4px;
  height:4px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  background:#fff;
  -moz-box-shadow:-1px -1px 2px #004977;
  -webkit-box-shadow:-1px -1px 2px #004977;
  box-shadow:-1px -1px 2px #004977;
}
input.tagit-hidden-field {
	display: none;
}
ul.tagit li.tagit-choice-read-only {
	padding: .2em .5em .2em .5em; 
}
ul.tagit li.tagit-choice-editable {
	padding: 4px 25px 0 12px;
}
ul.tagit li.tagit-new {
    padding: .25em 4px .25em 0;
}
ul.tagit li.tagit-choice a.tagit-label {
	cursor: pointer;
	text-decoration: none;
}
ul.tagit li.tagit-choice .tagit-label:not(a) {
  color:#fff;
  font-size:13px;
  line-height:16px;
  font-weight: normal
}
ul.tagit li.tagit-choice a.tagit-close {
	text-decoration: none;
}
ul.tagit li.tagit-choice .tagit-close {
	right: .4em;
	top: 50%;
	margin-top: -8px;
	cursor: pointer;
	position: absolute;
	line-height: 12px;
}
ul.tagit li.tagit-choice .ui-icon {
	display: none;
}
/* used for some custom themes that don't need image icons */
ul.tagit li.tagit-choice .tagit-close .text-icon {
	display: inline;
	font-family: sans-serif;
	font-size: 13px;
	color: #FFF;
}
ul.tagit li.tagit-choice input {
	display: block;
	float: left;
	margin: 2px 5px 2px 0;
}
ul.tagit input[type="text"] {
  margin: 0;
  padding: 0;
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  color: #333333;
  background: none;
  outline: none;
}
ul.tagit li.tagit-choice:hover, ul.tagit li.tagit-choice.remove {
	background-color: #555;
}
ul.tagit li.tagit-choice:hover::before {
  border-color:transparent #555 transparent transparent;
}
ul.tagit li.tagit-choice a.tagLabel:hover, ul.tagit li.tagit-choice a.tagit-close .text-icon:hover {
	color: #F00;
}
.ui-widget {
	font-size: 13px;
}

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tag-it! Example</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://aehlke.github.io/tag-it/js/tag-it.js"></script>
<form action="" method="POST">
		<ul id="allowSpacesTags"></ul>
		<input type="submit" />
	</form>

有人能帮助我吗？谢谢你的阅读。

此致

八字