javascript添加不必要的空格来开始切换类/原始类的结尾

时间:2017-01-19 10:30:07

标签: javascript html

我正在尝试开发一个非常简单的add / toggle类方法,类似于 jQuery func filterArrayAlphabatically(contacts inputContacts: [Contact]) -> [[String: [Contact]]] { //Using this will remove any contacts which have a name not beginning with these letters, is that intended? let alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".characters.map({ String($0) }) // For strings use a localized compare, it does sensible things with accents etc. let allContacts = inputContacts.sorted { $0.name.localizedCompare($1.name) == .orderedAscending } //Now we're using an array of dictionaries, each of which will have a single key value pair [letter: [Array of contacts]] var result = [[String: [Contact]]]() for letter in alphabet { result.append([letter: contacts(beginningWith: letter, from: allContacts)]) } return result } func contacts(beginningWith prefix: String, from contactList: [Contact]) -> [Contact] { //you could use a filter here for brevity, e.g. //let contacts = contactList.filter { $0.name.capitalized.hasPrefix(prefix) } //this is short enough to reasonably be used at the call site and not within a function var contacts = [Contact]() for contact in contactList { if contact.name.capitalized.hasPrefix(prefix) { contacts.append(contact) } } return contacts } let contacts = [Contact(name: "Bob"), Contact(name: "Kate"), Contact(name: "Darling")] let filteredArray = filterArrayAlphabatically(contacts: contacts) print(filteredArray) //[["A": []], ["B": [Contact(name: "Bob")]], ["C": []], ["D": [Contact(name: "Darling")]], ["E": []], ["F": []], ["G": []], ["H": []], ["I": []], ["J": []], ["K": [Contact(name: "Kate")]], ["L": []], ["M": []], ["N": []], ["O": []], ["P": []], ["Q": []], ["R": []], ["S": []], ["T": []], ["U": []], ["V": []], ["W": []], ["X": []], ["Y": []], ["Z": []]] addClass()方法。

但是,我遇到了一个小问题,该方法最初会很好用,但在第一次添加/切换之后,新类的前面会增加空格(或者背后原始课程。)

对于示例

toggleClass()

显然不是它应该如何运作,但我无法找到一种方法来修复它而不会破坏我的<!-- initial toggle / add (this is what I wanted everytime) !--> <div class="firstclass toggledclass"></div> <!-- after initial toggle, THEN the new class is removed (this is what I'm left with) !--> <div class="firstclass "></div> <!-- after initial toggle / add (when I add a new class back in again) !--> <div class="firstclass toggledclass"></div> <!-- and so on... !-->

这是我的(相关) JavaScript

script

我还是 JavaScript 的新手,所以大部分内容都来自我发现的改变// add class for(var i = 0; i < this.element.length; i++){ if((" " + this.element[i].className + " ").indexOf(" " + classes + " ") < 0){ this.element[i].className += " " + classes; // i feel the problem retains here } } // toggle class for(var i = 0; i < this.element.length; i++){ if(this.element[i].classList.contains(classes)){ var regex = new RegExp("(^| )" + classes + "($| )", "g"); for(var i = 0; i < this.element.length; i++){ this.element[i].className = this.element[i].className.replace(regex, " "); } } else { if((" " + this.element[i].className + " ").indexOf(" " + classes + " ") < 0){ this.element[i].className += " " + classes; // and here } } } (我想偏离scripts新方法来自论坛的classList.add()等。)

如果有人可以帮我弄清楚如何解决这个问题/改进这段代码,那么非常赞赏,

1 个答案:

答案 0 :(得分:3)

也许直接使用空格来尝试将所有类放入数组并在数组上工作。它会起作用

var classStr = el.getAttribute('class');
var classes = classStr.split(" ");

将类推送到数组之后执行join方法。

所以,如果你想要在数组中添加新类,我首先会看看类是否已经在

if(classes.indexOf("class") == -1) {
classes.push("class");
}