Question

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

我的目标：使用jQuery＆amp;更新动态表单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>

Answer 1

这可以解决您的问题：

   $(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）可以访问被点击的元素。即使是“this”（没有美元符号也没有引号）会给出这样的访问权限，但它不是jquery对象，我们需要jquery对象进行进一步的操作。
nearest（'tr'）迭代父元素链，直到找到满足指定选择符的元素（在这种情况下，它搜索最接近的tr元素）。
find（'。txta'）迭代（当前元素的）后代，直到找到满足指定选择器的元素（在这种情况下，它在tr元素中搜索具有“txta”类的任何元素））。
其余代码未更改。

补充说明：

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

将jquery视为DOM树上的“导航系统”。使用“最近”，“查找”，“下一步”，“上一页”等功能，您可以在运行时动态浏览并获取所需的元素。

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

当重复所需的对象时（如表中的行/单元格或单元格中的元素），然后使用css-classes和DOM遍历函数来解决它。

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

http://learn.jquery.com/using-jquery-core/traversing/

http://api.jquery.com/category/traversing/

jQuery Multiple Dynamic Forms + Foreach循环

1 个答案: