Javascript jQuery多个动态表单+；Foreach循环

好吧，我完全卡住了。我尝试了这里的每一个答案，但我就是无法让它发挥作用

我的目标：使用jQuery和AJAX更新动态表单

问题出在哪里：当单击其中一个“保存”按钮时，它只保存第一个值，我尝试使用不同的ID进行保存，但作为jQuery的新手，我认为我做得不对

jQuery

$(document).ready(function() {
    $("textarea").keyup(function(){
        var txtArea = $('.txta').val();
        var scriptString = $('.button').attr("url");
        $(".button").click(function(){  
            $.ajax({
              method: 'get',
              url: '../wp-content/plugins/custom-text-editor/writefile.php',
              data: {
               'myString': scriptString,
               'txt': txtArea,
                'ajax': true
              },
              success: function(data) {
                $('#'+myString).text(data);
            return false;
              }
            });
        });
    });
});

writefile.php

$file = fopen("files/tab1.txt","w");
$txt = $_GET['txt'];
fwrite($file,$txt);
fclose($file);
echo "OK!";

生成的HTML

<table class=bordered>
    <tr>
        <th>Filename</th>
        <th></th>
        <th></th>
    </tr>
    <tr class=header>
        <td class='plus'>+</td>
        <td><p>tab1.txt</p></td>
        <td><span id='ss' class='data'></span></td>
    </tr>
    <tr>
        <td colspan="3" class="nopad">
            <p><textarea cols="80" class="txta" rows="12" id="tab1.txt">asdasd</textarea>
            <span id='tab1.txt' class='button' rel='qyz' url=tab1.txt>Save</span></p>   
        </td>
    </tr>
    <tr class=header>
        <td class='plus'>+</td>
        <td><p>tab2.txt</p></td>
        <td><span id='ss' class='data'></span></td>
    </tr>
    <tr>
        <td colspan="3" class="nopad">
            <p><textarea cols="80" class="txta" rows="12" id="tab2.txt">This is file 2</textarea>
            <span id='tab2.txt' class='button' rel='qyz' url=tab2.txt>Save</span></p>
        </td>
    </tr>
    <tr class=header>
        <td class='plus'>+</td>
        <td><p>tab3.txt</p></td>
        <td><span id='ss' class='data'></span></td>
    </tr>
    <tr>
        <td colspan="3" class="nopad">
            <p><textarea cols="80" class="txta" rows="12" id="tab3.txt">And File 3</textarea>
            <span id='tab3.txt' class='button' rel='qyz' url=tab3.txt>Save</span></p>
        </td>
    </tr>
    <tr class=header>
        <td class='plus'>+</td>
        <td><p>tab4.txt</p></td>
        <td><span id='ss' class='data'></span></td>
    </tr>
    <tr>
        <td colspan="3" class="nopad">
            <p><textarea cols="80" class="txta" rows="12" id="tab4.txt">It works!</textarea>
            <span id='tab4.txt' class='button' rel='qyz' url=tab4.txt>Save</span></p>
        </td>
    </tr>
</table> 

文件名
+
tab1.txt

asdasd
保存

+
tab2.txt

这是文件2
拯救

+
tab3.txt

和文件3
拯救

+
tab4.txt

它起作用了！
拯救

这应该可以解决您的问题：

   $(document).ready(function () {
        $(".button").click(function () {
            var txtArea = $(this).closest('tr').find('.txta').val();
            var scriptString = $(this).closest('tr').find('.button').attr("url");
            $.ajax({
                method: 'get',
                url: '../wp-content/plugins/custom-text-editor/writefile.php',
                data: {
                    'myString': scriptString,
                        'txt': txtArea,
                        'ajax': true
                },
                success: function (data) {
                    $('#' + myString).text(data);
                    return false;
                }
            });
        });
    });

工作原理：

$（此选项）提供对正在单击的元素的访问权限。即使“this”（不带美元符号和引号）也提供了这样的访问权限，但它不是jquery对象，我们需要jquery对象进行进一步的操作

最近（'tr'）迭代父元素链，直到找到满足指定选择器的元素（在本例中，它搜索最近的tr元素）

find（'.txta'）迭代（当前元素的）子体，直到找到满足指定选择器的元素（在本例中，它在tr元素中搜索具有“txta”类的任何元素）

代码的其余部分保持不变

进一步说明：

事件处理程序中的事件处理程序（如$（“textarea”）.keyup（function（）{…$（“.button”）.click（function（）{…）应该避免，因为其效果是：每次处理外部事件时，都会创建并附加内部事件的新处理程序

可以将jquery看作是DOM树上的“导航系统”，通过“最近”、“查找”、“下一步”、“上一步”等函数，您可以在运行时四处导航并动态地到达所需的元素

当所需对象具有ID且唯一时，请使用“#ID”语法对其进行寻址

当所需对象被重复时（如表中的行/单元格或单元格中的元素），然后使用css类和DOM遍历函数对其进行寻址

如果您需要有关DOM遍历的更多信息：

---

你能发布生成的HTML吗（而不是echo的一行又一行）？添加了它，我很抱歉代码太乱。太棒了！就像一个符咒一样工作：）为了未来读者的利益，你能解释一下为什么这会解决问题，或者更确切地说是什么问题吗？是的，我很高兴：）我用详细的解释扩展了我的答案