需要幫助重構這個jQuery片段

我幾乎尷尬地說，我無法找出一個更好的方法來做到這一點。有人可以幫助我重構這段代碼嗎？我嘗試在一個匹配函數中做幾個「或」運算符，但它似乎並沒有採用它們。需要幫助重構這個jQuery片段

$('.ui-icon-pencil, .ui-icon-check, .ui-icon-close, .ui-icon-trash').hover(function(e) {   

    console.log($(this).attr('class')); 

    optionsClass = 'ui-icon-pencil'; 
    confirmClass = 'ui-icon-check'; 
    closeClass = 'ui-icon-close'; 
    deleteClass = 'ui-icon-trash'; 

    icon = $(this).attr('class').match(optionsClass); 

    if(icon == null) { 
    icon = $(this).attr('class').match(confirmClass); 
    } 
    if(icon == null) { 
    icon = $(this).attr('class').match(closeClass); 
    } 
    if(icon == null) { 
    icon = $(this).attr('class').match(deleteClass); 
    } 

    console.log('icon = '+icon); 

});

來源

2012-03-16 Catfish

$('.ui-icon-pencil, .ui-icon-check, .ui-icon-close, .ui-icon-trash').hover(function(e) {   

    var icon = $(this).attr('class').match(/ui-icon-(?:pencil|check|close|trash)/)[0] 
    console.log('icon = '+icon); 

});

來源

2012-03-16 16:06:45 nathanjosiah

這個完美的作品。 '[0]'做了什麼？ – Catfish 2012-03-16 16:14:25

'.match（）'返回找到的匹配數組，[0]返回找到的整個匹配項。 – nathanjosiah 2012-03-16 16:37:33

當你使用一個正則表達式，做到以正確的方式：

$('.ui-icon-pencil, .ui-icon-check, .ui-icon-close, .ui-icon-trash').hover(function(e) { 
    var icon = /\bui-icon-(?:pencil|check|close|trash)\b/.exec(this.className); 
    if (icon) { // If a match is found 
     icon = icon[0]; 
    } 
    console.log('icon = ' + icon); 
});

this.className持有類名
/ui-icon- ... /的（空格隔開）列表是一個RegExp字面。
regex.exec(input_string)是等效的，但比input_string.match(regex)更整齊。

當發現匹配時，icon將在以下格式的數組：

[full match, group1, group2, ..., groupN]

要看到完整的匹配，而不單獨的組中，使用icon[0]（icon陣列的第一個元素）。

string.match將第一個參數轉換爲RegExp。通常，regex.exec優於string.match，因爲如果輸入不是字符串（意外？），則後一種方法會失敗。

我RegEx的解釋：\b匹配單詞邊界。 (?:pencil|check|close|trash)是一個取消引用的RegEx組，與"pencil","check","close"或"trash"相匹配。

來源

2012-03-16 16:05:09

你能解釋一下這是什麼嗎？ – Catfish 2012-03-16 16:05:53

@Catfish我在答案的底部添加了參考資料+簡要說明。你熟悉正則表達式嗎？ – 2012-03-16 16:09:56

我在正則表達式非常糟糕。 – Catfish 2012-03-16 16:10:35

需要幫助重構這個jQuery片段

回答

相關問題