JQuery的重構需要幫助

Question

這裏是我的javascript代碼：

<script type="text/javascript"> 
    $(document).ready(function() { 

     var currentInput = ''; 
     var currentLabel = ''; 

     $("#userLookup").click(function() { 
      var url = "<%= Url.Action("ListAll" , "User") %>"; 
      currentInput = $("#User"); 
      currentLabel = $("#lblUser"); 
      openModal(url); 
      return false; 

     }); 

     $("#locationLookup").click(function() { 
      var url = "<%= Url.Action("ListAll" , "Location") %>"; 
      currentInput = $("#Location"); 
      currentLabel = $("#lblLocation"); 
      openModal(url); 
      return false; 
     }); 


     $(".selectable").live("click", function(e){ 
      currentInput.val($(this).attr('id')); 
      var labelText = $(this).parent().parent().find('td').eq(2).html(); 
      currentLabel.html(labelText); 
      $.fn.colorbox.close(); 
      e.preventDefault(); 
     }); 

    }); 

    function openModal(url){ 
     $.fn.colorbox({ 
       href:url 
       , open:true 
       , width: "400px" 
       , height: "300px" 
       }); 
    } 
</script> 

這是我的HTML

<table width = "100%"> 
    <tr>    
     <td>Asset User Id:</td> 
     <td><%= Html.TextBox("User", Model.User, (object)new{style = "width:100px", maxLength="20"})%> 
      <a id="userLookup" href="#">Lookup User</a> 
     <label id="lblUser"></label> 
     <%=Html.ValidationMessage("User")%></td> 
    </tr>  
    <tr>    
     <td>Location Id:</td> 
     <td><%= Html.TextBox("Location", Model.Location, (object)new{style = "width:100px", maxLength="20"})%> 
      <a id="locationLookup" href="#">Lookup Location</a> 
     <label id="lblLocation"></label> 
     <%=Html.ValidationMessage("Location")%></td> 
    </tr>   
</table> 

我有的是上面我列舉多個查詢的字段（我省略）相似，兩者的正在尋找是否有人能幫我想出一個乾淨/乾燥的方法來做這樣的事情？

感謝

Answer 1

我會將模式框的網址添加到鏈接本身。然後，您可以添加一個類到該鏈接來調用所需的功能。這也意味着您可以將JS放在外部文件中，並且您的JS不依賴於ASP.NET MVC Html幫助器方法。

你的HTML更改爲類似：

<table width = "100%"> 
    <tr>    
     <td>Asset User Id:</td> 
     <td> 
      <%= Html.TextBox("User", Model.User, (object)new{style = "width:100px", maxLength="20"})%> 
      <%= ActionLink("Lookup User", "ListAll", "User", null, new { class="lookup-link" }) %> 
      <label id="lblUser"></label> 
      <%=Html.ValidationMessage("User")%> 
     </td> 
    </tr>  
    <tr>    
     <td>Location Id:</td> 
     <td> 
      <%= Html.TextBox("Location", Model.Location, (object)new{style = "width:100px", maxLength="20"})%> 
      <%= ActionLink("Lookup Location", "ListAll", "Location", null, new { class="lookup-link" }) %> 
      <label id="lblLocation"></label> 
      <%=Html.ValidationMessage("Location")%> 
     </td> 
    </tr>   
</table> 

然後你就可以簡化您的jQuery的東西，如：

var currentInput = ''; 
var currentLabel = ''; 

$(".lookup-link").click(function() { 
    var url = $(this).attr("href"); 
    currentInput = $(this).siblings("input")[0]; 
    currentLabel = $(this).siblings("label")[0]; 
    openModal(url); 
    return false; 
}); 

我沒有測試此代碼的任何，所以有可能是一個億錯誤。 ;-)

HTHS，
查爾斯

Answer 2

你可以有一個排序，重視對userLookup和locationLookup點擊處理jQuery插件的。它可能會採取3個參數：

1. 網址
2. 輸入
3. 標籤

否則，你可以有一個函數，4（第一個是到單擊處理程序綁定到項目）並運行你上面的確切代碼。

只是不要過頂。如果您開始爲一次性解決方案添加更多參數（例如，布爾值是否在頂部顯示模式爲「x」或「close」），那麼您可能會使事情複雜化。

Answer 3

如果您使用約定來命名所有查找元素，則可以創建適用於所有實例的通用函數。

喜歡的東西：

OpenLookupModal(lookupId) 
    { 
     var inputName = lookupId.id.substr(0, lookupId.id.indexOf('Lookup'); //take all of the id before the word "lookup" 
     var currentInput = $("#" + inputName)); 
     var currentLabel = $("#lbl" + inputName); 
     openModal(url); 
     return false; 
    } 

要使用它：

$("#locationLookup").click(OpenLookupModal("#locationLookup")); 

你甚至可以得到看中的，所有的ID在 「查找」 結尾的單擊事件在一個聲明中綁定：

$("[id$='lookup']").click(OpenLookupModal(this)); 

警告：此代碼未經測試，但希望它g讓這個想法成爲可能。