如何創建'JQuery'函數調用並將數據傳遞給它們？

Question

我使用qtip jquery插件添加工具提示。我可能會在整個網站上添加50-60個工具提示。

我發現現在這樣做的方式是反覆剪切/粘貼jQuery代碼。例如：

// First, setup a tool tip for 'Enter Username'. 
$("input#user_login").qtip({ 
    content: 'Enter username', 
    position: { 
    corner: { 
     target: 'rightMiddle', 
     tooltip: 'leftMiddle' 
    } 
    }, 
    style: { 
    border: { 
     width: 1, 
     radius: 3, 
     color: '#0066CC' 
    }, 
    width: 200, 
    name: 'blue' 
    } 
}); 

現在，重複所有的'名字'。似乎毫無意義。

$("input#user_login").qtip({ 
    content: 'Enter First Name', 
    position: { 
    corner: { 
     target: 'rightMiddle', 
     tooltip: 'leftMiddle' 
    } 
    }, 
    style: { 
    border: { 
     width: 1, 
     radius: 3, 
     color: '#0066CC' 
    }, 
    width: 200, 
    name: 'blue' 
    } 
}); 

如何創建一個函數我可以將顯示文本傳遞給？

Answer 1

作爲一個通用的解決方案，要使用默認選項，然後擴展它任何時候，你可以用$.extend()就可以了，就像這樣：

var qtip_options = { 
    content: 'I'm a tooltip, 
    position: { 
    corner: { 
     target: 'rightMiddle', 
     tooltip: 'leftMiddle' 
    } 
    }, 
    style: { 
    border: { 
     width: 1, 
     radius: 3, 
     color: '#0066CC' 
    }, 
    width: 200, 
    name: 'blue' 
    } 
}; 

$("#user_login").qtip($.extend({}, qtip_options, { content: 'Enter username'}); 
$("#first_name").qtip($.extend({}, qtip_options, { content: 'Enter First Name'}); 

---

或者在你的情況，因爲你做了很多，讓我們使用一個插件，像這樣：

$.fn.myQtip = function(text) { 
    return this.qtip($.extend({}, qtip_options, { content: text}); 
}; 

然後就這樣稱呼它：

$("#user_login").myQtip('Enter username'); 
$("#first_name").myQtip('Enter First Name'); 

Answer 2

function setupToolTip(jQueryElement, display) { 
    jQueryElement.qtip({ 
    content: display, 
    position: { 
     corner: { 
     target: 'rightMiddle', 
     tooltip: 'leftMiddle' 
     } 
    }, 
    style: { 
     border: { 
     width: 1, 
     radius: 3, 
     color: '#0066CC' 
     }, 
     width: 200, 
     name: 'blue' 
    } 
    }); 
} 

setupToolTip($("input#user_login"), 'Enter username'); 
setupToolTip($("input#user_first_name"), 'Enter First Name'); 

Answer 3

如果所有其他選項（如樣式和寬度）對於所有工具提示都是相同的，我會建議更改插件代碼中的默認值。這將允許你做出這樣的提示：

$("input#user_login").qtip({content: "Enter username"}); 
$("input#user_password").qtip({content: "Enter password"}); 

Answer 4

而不是定位特定的元素，您可以按類別一次性定位所有元素。然後，您將這些值隱藏在HTML中。這樣您只需要一個電話即可設置qTip並自動查找您的內容。隨着更多元素的添加，您無需修改​​腳本，只需給他們一類「hasTip」即可完成設置。

$(".hasTip").qtip({ 
    content: $(this).next('.tipText').html(), 
    ... 

在HTML（地方，有一類 「hasTip」 的元素在此之後右）：

<div class='tipText' style='display:none">First Name</div> 

一次編寫，到處使用。

編輯：

尼克，你是正確的，我的 「this」 引用是錯誤的。我確實相信像這樣的工具的「自我發現」。他們只需找到自己的內容，並且無需干預就可以自己動手。

我不認爲這是「標記超標」超過$("#user_login").qtip($.extend({}, qtip_options, { content: 'Enter username'});是「函數調用過度殺傷」。他們只是解決問題的不同方式。

我喜歡我的方法，因爲我可以「包含並忘記」，並且永遠不必編寫元素特定的初始化。