Foreach循环中的Jquery replaceWith

Question

当我执行下面的代码时，所有img 和imgg 的id 将被替换，因为它们处于foreach 循环中，但我只想将其应用于单击的那个。任何人都可以帮忙吗？

HTML：

<button type="submit" id="getRequest" class="btn btn-info btm-sm " role="button" style="width:100px;height:30px">
<p id="imgg">Add to Cart</p>
 </button>

JS：

   $(document).ready(function() {
$(document).on('submit', '#reg-form', function() {

    var data = $(this).find("#post_id").val();
    //var ln = $("#lname").val();

    //var data = 'fname='+fn+'&lname='+ln;

    //  var data = $(this).serialize();
    $.ajax({
        type: 'POST',
        url: '{{url("/ajax")}}',
        data: {
            'name': data,
            '_token': $('input[name=_token]').val()
        },
        success: function(data) {
            $(imgg).replaceWith('<img id=imgg   src=img/ajax.gif> ');

            setTimeout(function() {
                $(imgg).replaceWith('  <p id="imgg">Add to Cart</p> ').hide('blind', {}, 500)
            }, 1300);
            console.log(data);
        },

        error: function(data) {
            alert("You must Login First");
        }
    });
    return false;
});

});

Answer 1

谢谢大家我找到了解决方案但是你是真正的MVP，这里是

 $(document).ready(function()
{
 $(document).on('submit', '#reg-form', function()
 {
var imgid = $(this).find("#imgg");
var data = $(this).find("#post_id").val();
  //var ln = $("#lname").val();

  //var data = 'fname='+fn+'&lname='+ln;

//  var data = $(this).serialize();
  $.ajax({
  type : 'POST',
  url  : '{{url("/ajax")}}',
 data: {'name':data, '_token': $('input[name=_token]').val()},
 success: function(data) {
    $(imgid).replaceWith('<img id=imgg src=img/ajax.gif> ');
   var thisForm = this;
    setTimeout(function() {
        $(imgg).replaceWith('  <p id=imgg>Add to Cart</p> ').hide('blind', {}, 500)
    }, 1300);
    console.log(data);
},

      error :  function(data)
      {
          alert("You must Login First");
      }
  });
  return false;
 });

});
</script>
<script type="text/javascript">
$.ajaxSetup({
   headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
});

Answer 2

而不是使用$(imgg) 使用$(this)，并且当你在使用.replaceWith 时给出iamge 的id 时，你也错过了引号：

success: function(data) {
    $(this).replaceWith('<img id="imgg" src="img/ajax.gif>" ');
   var thisForm = this;
    setTimeout(function() {
        $(thisForm).replaceWith('  <p id="imgg">Add to Cart</p> ').hide('blind', {}, 500)
    }, 1300);
    console.log(data);
},

原因？

简单。 this 对象不会改变。它是函数的所有者。在此处查看有关原因的更多信息：Jquery - When to use "this" and when to use "$(this)"?

编辑2

现在我必须把它放在上层所以这个：

  $(document).ready(function() {
     $(document).on('submit', '#reg-form', function() {

         var vm = this //Upper Level
         var data = $(this).find("#post_id").val();
         $.ajax({
             type: 'POST',
             url: '{{url("/ajax")}}',
             data: {
                 'name': data,
                 '_token': $('input[name=_token]').val()
             },
             success: function(data) {
                 $(vm).replaceWith('<img id=imgg   src=img/ajax.gif> ');

                 setTimeout(function() {
                     $(vm).replaceWith('  <p id="imgg">Add to Cart</p> ').hide('blind', {}, 500)
                 }, 1300);
                 console.log(data);
             },

             error: function(data) {
                 alert("You must Login First");
             }
         });
         return false;
     });
 });

关于这个特殊问题请参考这里：
Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined