jQuery为已经工作的脚本创建多个实例

Question

几天前我问了一个问题，那是@RustyTheBoyRobot的回答。

下面的代码工作100％，但我需要一种方法来在页面上添加多个“查找地址”按钮。一个用于街道地址，另一个用于邮政地址。

任何人都可以告诉我如何在不复制模式框和Javascript的情况下完成此操作吗？

UPDATE：一些测试我想通了什么，我需要做的，我需要从按钮传递变量表模态形式的某种方式，所以当我点击一个排它仅更新表单字段我指定。

我已经创建了一个表中的模式对话框形式的代码

。当你点击一个表格行时，它会在父页面上填充一个表单。

模态对话框

<div id="modal_form" title="Address Search"> 
<form id="address_search"> 
    <ul> 
     <li><label for="name">Search by street description</label> 
      <input type="text" name="street_description" id="street_description" /> 
      <input type="button" id="search_button" class="form_button" value="Search"></li> 
    </ul> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data"> 
        <tbody><tr> 
        <td width="200px"><a href="#">Street</a></td> 
        <td width="200px"><a href="#">Suburb</a></td> 
        <td width="200px"><a href="#">City</a></td> 
        </tr> 
        <tr id="row1"> 
        <td class="address_street">Harambee Road</td> 
        <td class="address_suburb">Onerai</td> 
        <td class="address_city">Onerai Rural</td> 
        </tr> 
        <tr id="row2"> 
        <td class="address_street">Hutchinson Road</td> 
        <td class="address_suburb">Mt Wellington</td> 
        <td class="address_city">Auckland City</td> 
        </tr> 
        <tr id="row3"> 
        <td class="address_street">Kauri Road</td> 
        <td class="address_suburb">Westfordshire</td> 
        <td class="address_city">Palmerston North</td> 
        </tr> 
      </tbody></table><!-- /table#table-data --> 
     </form> 
</div><!-- /div#modal_form --> 

的Javascript

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#table-data tr').click(function() { 
     var curRowId = $(this).attr("id"); 
     $('#street_name').val($('#' + curRowId + ' td.address_street').text()); 
     $('#suburb').val($('#' + curRowId + ' td.address_suburb').text()); 
     $('#city').val($('#' + curRowId + ' td.address_city').text()); 
    $("#modal_form").dialog('close'); 
    }); 
    }); 
</script> 

父窗体，在表单字段填充

<form id="profile"> 
<ul> 
<li><label for="street_number">Street Number</label><input id="street_number" type="text" placeholder="Street Number" name="street_number" ><input type="button" class="form_button" id="find_address" value="Find Address"></li> 
<li><label for="street_name">Street Name</label><input id="street_name" type="text" placeholder="Street Name" name="street_name" disabled="disabled" ></li> 
<li><label for="suburb">Suburb</label><input id="suburb" type="text" placeholder="Suburb" name="suburb" disabled="disabled" ></li> 
<li><label for="city">City</label><input id="city" type="text" placeholder="City" name="city" disabled="disabled" ></li> 
<li><input type="submit" id="submit" value="Save"></li> 
</ul> 
</form> 

Answer 1

我结束了使用jQuery来不同的类名称添加到具体取决于哪个按钮，按下表TD。

守则

<script type="text/javascript"> 
$(document).ready(function() { 
$('#find_address').click(function(){ 
$('#modal_form').dialog('open'); 
$('table#table-data_classy').attr('id', 'table-data'); $('td.address_street_classy').removeClass("address_street_classy").addClass("address_street"); $('td.address_suburb_classy').removeClass("address_suburb_classy").addClass("address_suburb"); 
$('td.address_city_classy').removeClass("address_city_classy").addClass("address_city"); 
}); //end click handler 
$('#find_address_classy').click(function(){ 
$('#modal_form').dialog('open'); 
$('table#table-data').attr('id', 'table-data_classy'); 
$('td.address_street').removeClass("address_street").addClass("address_street_classy"); 
$('td.address_suburb').removeClass("address_suburb").addClass("address_suburb_classy"); 
$('td.address_city').removeClass("address_city").addClass("address_city_classy"); 
}); //end click handler 
}); //end ready event 
</script> 


<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#table-data tr').live('click', function() { 
     var curRowClass = $(this).attr("class"); 
     $('#street_name').val($('.' + curRowClass + ' td.address_street').text()); 
     $('#suburb').val($('.' + curRowClass + ' td.address_suburb').text()); 
     $('#city').val($('.' + curRowClass + ' td.address_city').text()); 
     $("#modal_form").dialog('close'); 
    }); 
    }); 
</script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#table-data_classy tr').live('click',function() { 
     var curRowClass = $(this).attr("class"); 
     $('#street_name_classy').val($('.' + curRowClass + ' td.address_street_classy').text()); 
     $('#suburb_classy').val($('.' + curRowClass + ' td.address_suburb_classy').text()); 
     $('#city_classy').val($('.' + curRowClass + ' td.address_city_classy').text()); 
     $("#modal_form").dialog('close'); 
    }); 
    }); 

干杯

Answer 2

简而言之，您可能会考虑制作一个jQuery插件。

如果你想出了一个统一的方式来识别具体按钮的地址字段，一个jQuery插件可以自动计算出正确的字段等。

这里有一个像样的教程：

http://www.authenticsociety.com/blog/jQueryPluginTutorial_Beginner