不能用 childer() / find() 改变孩子答案

【问题标题】：can not change the child with childer() / find()不能用 childer() / find() 改变孩子
【发布时间】：2021-07-25 05:46:58
【问题描述】：

HTML：

 {{Form::open(['route' => ['client.message.mark' , $message] , 'class' => 'check_form' ])}}
 @if($message->new == 0)
   <button class="btn btn-primary btn-floating submitbutton"
   title="{{__('Mark as read')}}" data-toggle="tooltip" type="submit">
     <i class=" icon-item fa   fa-times   font-size-13">x</i>
 else
     <button class="btn btn-primary btn-floating submitbutton"
      title="{{__('Mark as unread')}}"  data-toggle="tooltip" type="submit">
      <i class=" icon-item fa   fa-check   font-size-13">s</i>
      @endif
</button>

查询：

   <script>
$(document).on('submit' , '.check_form' , '' , function(event){
 event.preventDefault();
 $.ajax({
   url:$(this).attr('action'),
   type:'post',
   data: $(this).serialize(),
   success: function(s){
         console.log($(this).children('.icon-item'));
          if(s.data === 'marked_as_read')
             $(this).children('.icon-item').removeClass('fa-times').addClass('fa-check');
             
           [  or   $(this).children('i').removeClass('fa-times').addClass('fa-check');
             or      $(this).find('.icon-item').removeClass('fa-times').addClass('fa-check'); 



    $(document).on('submit' , '.check_form' , '' , function(event){
     event.preventDefault();
     $.ajax({
       url:$(this).attr('action'),
       type:'post',
       data: $(this).serialize(),
       success: function(s){
             console.log($(this).children('.icon-item'));
              if(s.data === 'marked_as_read')
                 $(this).children('.icon-item').removeClass('fa-times').addClass('fa-check');
                 
               [  or   $(this).children('i').removeClass('fa-times').addClass('fa-check');
                 or      $(this).find('.icon-item').removeClass('fa-times').addClass('fa-check'); ]
              if (s.data === 'marked_as_unread)
                   $(this).children('.icon-item').removeClass('fa-chcek').addClass('fa-times');

                                            }
                                        });
                                    });

<!-- language: lang-html -->

     {{Form::open(['route' => ['client.message.mark' , $message] , 'class' => 'check_form' ])}}
                                                        @method('POST')
    @csrf
     
     @if($message->new == 0)
                                                            <button class="btn btn-primary btn-floating submitbutton"
                                                                    title="{{__('Mark as read')}}"
                                                                    data-toggle="tooltip"
                                                                    type="submit">
                                                                <i
                                                                   class=" icon-item fa   fa-times   font-size-13">x</i>
                                                            @else
                                                                    <button class="btn btn-primary btn-floating submitbutton"
                                                                            title="{{__('Mark as unread')}}"
                                                                            data-toggle="tooltip"
                                                                            type="submit">
                                                                <i
                                                                   class=" icon-item fa   fa-check   font-size-13">s</i>
                                                            @endif
                                                        </button>


]
          if (s.data === 'marked_as_unread)
               $(this).children('.icon-item').removeClass('fa-chcek').addClass('fa-times');

                                        }
                                    });
                                });
                            </script>

不能使用 children() / find() / html() 改变任何东西当我使用 $('.icon-item') 更改类和图标时，它会起作用（正如我们看到的所有图标），但是当我想更改孩子时，以某种方式不可能。如果有一种方法可以更改子内容，那对我来说将是一个很好的节省，可以节省更多时间。我花了一天的时间才找到该死的图标请帮忙

【问题讨论】：

这些@if 是什么东西？请创建一个minimal reproducible example
你有一个模棱两可的this。我建议您将this 分配给另一个变量。也许在你进入 AJAX 调用之前$self = $(this);。
@Twisty 您可以将此添加为答案，，，它有效！但这是为什么呢？

标签： jquery css jquery-ui

【解决方案1】：

在您的 AJAX 回调中，this 不明确。它可能意味着回调或 AJAX 或提交函数。为了缓解这种情况，请定义一个更具体的变量。

$(document).on('submit' , '.check_form' , '' , function(event){
  event.preventDefault();
  var $self = $(this);
  $.ajax({
  ...

现在我们知道$self 代表提交的表单。这也意味着.children()会有更具体的参考。

【讨论】：