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让这个想法成为可能。