点击编辑图标时用JQuery动态修改模态框输入框值的问题

我有一个带预设问题的折叠面板列表，点击编辑图标会弹出模态框，用里面的表单修改预设问题文本。想只用一个模态框，点击不同编辑图标时，模态框输入框显示对应问题，但现在只有第二个问题能正常修改，其他问题无法对应，求解决方法。

原代码 #

折叠面板代码

<li class="active" id="one">
    <div class="collapsible-header">
     <span>Question 1</span>        
    </div>
    <div class="collapsible-body">
      <span id="questionOne">What is your given name?</span>
      <a href="#editModal" data-target="editModal" class="modal-trigger"><i class="material-icons right" id="edit1">edit</i></a>    
    </div>
</li>
<li>
  <div class="collapsible-header">
    <span id="questionTwo">Question 2</span>        
  </div>
  <div class="collapsible-body">
    <span>What is your surname?</span>
    <a href="#editModal" data-target="editModal" class="modal-trigger"><i class="material-icons right" id="edit2">edit</i></a>    
  </div>
</li>

模态框代码

<div class="input-field col s6">
  <input value="What's your given name?" id="given_name" type="text" class="">
  <label class="active" for="given_name">Question:</label>
</div>

原jQuery代码

$(document).ready(function() {
        $("#edit2").click(function(){
            $("#given_name").val("What is your surname?");
        })
    })

解决方法 #

你现在的问题是只给第二个编辑图标写了固定点击事件，其他按钮没绑定，还硬编码了文本值，没法动态匹配对应问题。可以通过以下步骤修复：

1. 给问题文本和编辑图标加统一类名：方便批量选择元素，新增问题时不用改代码
2. 统一绑定点击事件：用类选择器给所有编辑图标绑定事件，不用逐个写
3. 动态获取对应问题文本：点击时通过DOM关系找到当前面板的问题文本，赋值给模态框输入框
4. 初始化模态框：Materialize框架的模态框需要初始化才能正常工作

修改后的完整代码 #

折叠面板代码（添加统一类名）

<li class="active" id="one">
    <div class="collapsible-header">
     <span>Question 1</span>        
    </div>
    <div class="collapsible-body">
      <span class="question-text">What is your given name?</span>
      <a href="#editModal" data-target="editModal" class="modal-trigger"><i class="material-icons right edit-btn" id="edit1">edit</i></a>    
    </div>
</li>
<li>
  <div class="collapsible-header">
    <span id="questionTwo">Question 2</span>        
  </div>
  <div class="collapsible-body">
    <span class="question-text">What is your surname?</span>
    <a href="#editModal" data-target="editModal" class="modal-trigger"><i class="material-icons right edit-btn" id="edit2">edit</i></a>    
  </div>
</li>

模态框代码（补全完整结构）

<div id="editModal" class="modal">
  <div class="modal-content">
    <div class="input-field col s6">
      <input value="" id="given_name" type="text" class="">
      <label class="active" for="given_name">Question:</label>
    </div>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Save</a>
  </div>
</div>

修改后的jQuery代码

$(document).ready(function() {
    // 初始化Materialize模态框
    $('.modal').modal();

    // 给所有编辑图标绑定点击事件
    $('.edit-btn').click(function() {
        // 找到当前点击图标所在面板的问题文本
        const targetText = $(this).closest('.collapsible-body').find('.question-text').text().trim();
        // 把文本赋值给模态框的输入框
        $('#given_name').val(targetText);
    });
});

说明 #

• 用.edit-btn类绑定所有编辑按钮，新增问题时只需添加相同类名，不用额外写事件
• 通过closest('.collapsible-body')定位到当前按钮所在的面板内容区，再用find('.question-text')精准获取对应问题文本，确保每个按钮都能匹配到自己的问题
• 初始化模态框是Materialize的必要步骤，否则模态框可能无法正常弹出

内容的提问来源于stack exchange，提问作者Marcus De Freitas