CSS применить в ajax успешном ответе

Question

Я хочу применить следующий CSS в ajax успешном ответе для статуса. На самом деле я создаю изменения цвета значка сердца списка пожеланий на основе щелчка и удаления. Я применяю цвет CSS, но теперь я хочу добавить следующий CSS. Код не работает из-за перезаписи цвета css. если status == 2 применить следующее CSS:

.remove {
  background-position: -1680px 0;
  transition: background 1s steps(7);
  animation: remove-from-wishlist 1s steps(7);
}
@keyframes remove-from-wishlist {
  0% {
    background-position: -1320px 0;
  }
  100% {
    background-position: -1680px 0;
  }
}

Если status == 3 применить следующее CSS:

.add {
  animation: add-to-wishlist 1s steps(22);
  background-position: -1320px 0;
  transition: background 1s steps(22);
}
@keyframes remove-from-wishlist {
  0% {
    background-position: -1320px 0;
  }
  100% {
    background-position: -1680px 0;
  }
}

Blade-файл

  <?php 
                      if (Session::has('userid')) 
                      {
                      $userid=Session::get('userid');
                      }
                      $checklist=DB::select('select * from wishlist where user_id=? && product_id=?',[$userid,$value->sub_id]);
                      if($checklist)
                      {
                      ?>
                      <a class="sub" data-id="{{$value->sub_id}}" href="#"><i class="fa fa-heart whishstate" style="float:right;color:#FBA842"></i></a>
                     <?php }
                       else
                       {
                      ?>
                       <a class="sub" data-id="{{$value->sub_id}}" href="#"><i class="fa fa-heart whishstate" style="float:right;color:grey"></i></a>
                       <?php
                        }

                       ?>

Script :

<script type="text/javascript">
  $(document).ready(function(){
  $('.sub').click(function(e) { 

    var sub_id=$(this).attr('data-id');
    var input=$(this).prev();
    e.preventDefault()
               $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                  }
              });
         jQuery.ajax({

                  url: "{{ url('/add-to-wishlist') }}",
                  method: 'get',
                  data: {
                     sub_id: sub_id,
                  },
                  success: function(result){
                    if(result.status==1)
                    {
                       window.location.href="/login";
                    }
                    else if(result.status==2)
                     {
                        $('a[data-id="' + sub_id + '"] > i.whishstate').css({"color":"grey"});
                     }
                     else if(result.status==3)
                     {
                        $('a[data-id="' + sub_id + '"] > i.whishstate').css({"color":"#FBA842"});
                     }
                  }});

  });
 });

</script>

Answer 1

Вы можете напрямую добавить класс для применения CSS к нему. Как этот

if(result.status==2) {

      $('a[data-id="' + sub_id + '"] > i.whishstate').addClass('remove ');
}

else if(result.status==3) {

    $('a[data-id="' + sub_id + '"] > i.whishstate').addClass('add');

}

Answer 2

Сначала вы должны написать свой код CSS в файле .css, затем вам нужно просто добавить класс, используя jQuery в ответ ajax, как показано ниже:

jQuery.ajax({

              url: "{{ url('/add-to-wishlist') }}",
              method: 'get',
              data: {
                 sub_id: sub_id,
              },
              success: function(result){
                if(result.status==1)
                {
                   window.location.href="/login";
                }
                else if(result.status==2)
                 {
                    //first remove old class
                    $('a[data-id="' + sub_id + '"] > i.whishstate').removeClass('add');
                    $('a[data-id="' + sub_id + '"] > i.whishstate').addClass('remove');
                 }
                 else if(result.status==3)
                 {
                   //first remove old class
                    $('a[data-id="' + sub_id + '"] > i.whishstate').removeClass('remove');
                    $('a[data-id="' + sub_id + '"] > i.whishstate').addClass('add');
                 }
              }});