asp.net - 如何根据 html 表格在 JQuery 中选择表单元素？

Question

我正在开发一些 ASP.NET Web 表单，其中涉及一些动态生成，并且我需要在客户端添加一些 onClick 帮助程序。除了一个大问题之外，我已经有了一些可行的基本轮廓。

有多个 HTML 表，每个表由不同的 ASP.NET Web 控件生成。每个表都可以包含重叠的字段名称，这会导致我的 JQuery 单击事件处理程序出现问题。除了预期的表单字段之外，单击事件处理程序还链接到非预期的表单字段。

我提供了下面代码的简化示例版本。当在表中选择 id=thing1 的特定单选按钮时，此代码尝试设置文本框 box1 的值。显然，两个表中的表单字段都会触发 jquery 代码。

表格会根据不同的条件动态添加到网页中。可能不会加载任何表、仅加载 1 个表或两个表都可能加载。将来可能会添加其他表。每个表都来自不同的 .net Web 控件。

除了重命名表单字段以确保它们在所有用户控件中都是唯一的之外，是否有办法让 JQuery 仅作用于预期的表单字段？换句话说，是否可以将表 ID 以一种不会成为以后维护的噩梦的方式合并到 JQuery 代码中？

   <script>
    $(document).ready(function() {
      $("[id$=radio1_0]").click(function() {
        $("[id$=box1]").attr("value", "");
      });
      $("[id$=radio1_1]").click(function() {
        $("[id$=box1]").attr("value", "N/A");
      });
   </script>

   <table id="thing1">
      <tr><td>
        <radiobuttonlist id="radio1"/>
          <listitem>yes</listitem>
          <listitem>no</listitem>
      </td></tr>
      <tr><td>
        <textbox id="box1"/>
      </td></tr>
   </table>

   <table id="thing2"> 
      <tr><td>
        <radiobuttonlist id="radio1"/>
          <listitem>yes</listitem>
          <listitem>no</listitem>
      </td></tr>
     <tr><td>
        <textbox id="box1"/>
     </tr></td>
   </table>

Answer 1

有多种方法可以使用 jQuery 遍历 DOM，因此您可以获得对正确的相对元素的引用。

一种方法是向上遍历到父 table 元素，然后 .find() 您要查找的相对元素。

   <script>
    $(document).ready(function() {
      $("[id$=radio1_0]").click(function() {
          $(this).closest('table').find("[id$=box1]").attr("value", "");
      });
      $("[id$=radio1_1]").click(function() {
        $(this).closest('table').find("[id$=box1]").attr("value", "N/A");
      });
    });
   </script>