javascript - parent 找到或 sibling 或下一个都行不通

Question

我正在尝试在您单击按钮后填充输入的值。

我可以让它工作的唯一方法是如果我定位输入的 id，问题是我会多次这样做，所以我想使用 parent().find() 而不是硬编码 id。

HTML:

<div class="inner-box">
    <div class="mark-as-paid <?php echo 'paid' ?>">Paid</div>
    <input id="mark_as_paid" name="mark_as_paid" type="text" value="<?php echo $final_result[0]; ?>" class="mark_as_paid"></input>
</div>

AJAX:

 $(document).ready(function() {

     $('.mark-as-paid').click(function() {

         var paid_value = 'Paid';

         $.ajax({
             url: 'http://localhost/myshop/owe_money/add_paid.php',
             type: 'post',
             data: {
                 paid_value: paid_value
             },
             beforeSend: function() {
                 $("#ajax-result").html('Before');
             },

             success: function(data) {

                 $("#ajax-result").html(data);


                 $(this).parent().find('.mark_as_paid').val('Paid');



             },
             error: function(xhr, ajaxOptions, thrownError) {
                 $("#ajax-result").html('Error');
             }
         });



     });
 });

我也尝试过

$(this).parent().siblings('.mark_as_paid').val('Paid');

和

$(this).parent().siblings('input').val('Paid');

和

$(this).next('input').val('Paid');

对于兄弟节点，我在控制台中收到错误 TypeError: a.parentNode is undefined

似乎唯一有效的是

$('#mark_as_paid').val('Paid');

但这对我来说没有用，因为我会将 HTML 放入 for 循环中并生成许多输入，因此我想分别针对每个输入。

Answer 1

试试这个:

$(document).ready(function () {
    $('.mark-as-paid').click(function () {
        var paid_value = 'Paid';
        var $this = $(this);
        $.ajax({
            url: 'http://localhost/myshop/owe_money/add_paid.php',
            type: 'post',
            data: {
                paid_value: paid_value
            },
            beforeSend: function () {
                $("#ajax-result").html('Before');
            },
            success: function (data) {
                $("#ajax-result").html(data);
                $this.parent().find('.mark_as_paid').val('Paid');
            },
            error: function (xhr, ajaxOptions, thrownError) {
                $("#ajax-result").html('Error');
            }
        });
    });
});

我改变了什么:

• 在 ajax 调用中 this 不是您所期望的，因此使用 var $this = $(this); 将其缓存在外部