如何通过jQuery从Twig生成的列表中捕获DOM元素并单行控制input显隐

首先咱们先梳理下你现有代码里的几个核心问题：

1. Twig变量匹配错误：你循环里的变量是projectName，但按钮id却用了{{ project.ep_id }}，这会导致生成的按钮id为空或者完全错误，应该改成{{ projectName.project_id }}（或者你项目里对应的唯一标识字段）。另外，循环生成多个按钮时绝对不能用重复id，建议给按钮加个统一的class（比如toggle-input-btn），彻底避免id冲突问题。

2. jQuery语法与选择器问题：

   • 你写了两个重复的$(document).ready()，其实只需要一个就够，而且第一个代码块末尾少了闭合的)，语法错误直接导致代码无法执行。
   • 用$(".asd")会选中页面上所有class为asd的input，所以点击任何按钮都会触发所有输入框的显示/隐藏，这显然不是你要的单行控制效果。正确做法是定位当前点击按钮的兄弟元素里的目标input。

3. HTML结构不规范：form直接包裹tr不符合HTML规范（<tbody>的直接子元素只能是<tr>），这种嵌套可能导致浏览器解析异常，建议把form放到<td>内部调整结构。

修正后的完整代码 #

Twig模板部分

<table class="table">
 <thead>
 <tr>
 <th scope="col">ID</th>
 <th scope="col">Project Name</th>
 <th scope="col">Delete?</th>
 </thead>
 <tbody>
 {% for projectName in namesOfProjects %}
 <tr>
 <td>{{ projectName.project_id }}</td>
 <td>
 <!-- 给按钮加统一class，用项目id做data属性标记，避免id重复 -->
 <button class="toggle-input-btn" data-project-id="{{ projectName.project_id }}">
   {{ projectName.project_name }}
 </button>
 <!-- 初始隐藏input，用inline样式或者自定义hidden类都可以 -->
 <input type="text" class='asd' placeholder="{{ projectName.project_name }}" style="display:none;">
 </td>
 <td>
 <!-- 删除操作的form放到td内，用隐藏字段传递项目ID -->
 <form action="" method="post">
   <input type="hidden" name="project_id" value="{{ projectName.project_id }}">
   <button type="submit" class="btn btn-danger delete-btn">Delete</button>
 </form>
 </td>
 </tr>
 {% endfor %}
 </tbody>
</table>

jQuery脚本部分

$(document).ready(function(){
  // 绑定按钮点击事件，用class选择器避免id冲突
  $('.toggle-input-btn').click(function(e){
    e.preventDefault(); // 阻止按钮默认提交行为（按钮默认是submit类型）
    // 精准定位当前按钮的兄弟元素中的目标input，切换显示/隐藏
    $(this).siblings('.asd').toggle();
  });
});

关键细节说明 #

• 事件绑定优化：如果后续会通过AJAX动态添加项目行，推荐用事件委托写法：$(document).on('click', '.toggle-input-btn', function(){...})，确保动态生成的按钮也能触发事件。
• 精准选择器：$(this).siblings('.asd')只会找到当前点击按钮同一父元素下的目标input，完美实现单行独立控制。
• 默认行为阻止：按钮默认是submit类型，必须加e.preventDefault()避免点击后页面刷新，打断交互流程。

这样修改后，点击每个项目名称按钮，就只会切换当前行的input显示和隐藏啦！

内容的提问来源于stack exchange，提问作者Andreykin Sergey