在foreach循环中使用javascript获取div id

时间:2016-03-11 21:59:37

标签: javascript php jquery ajax

我正在使用laravel并且想要进行ajax调用来检索产品的id但是正如你在这里看到它将只获得第一个产品ID,因为它们将具有相同的id(或者当页面加载时第一个) 但我希望它:当我按添加到购物车时,点击的产品ID被发送 而且我的技能不是很好,这是我的第一个应用程序,任何人都可以帮忙吗?

这是代码

      @foreach($row as $product)
        <form method="post" id="reg-form">
            <input type="hidden" name="post_id" id="post_id" value="{{ $product->slug }}">
              {!! csrf_field() !!}
            <div class="col-sm-10 col-lg-3 col-md-10 ">
              <div class='productbox '>
                  @if($image = $product->images()->first())
                      <img src="{{ $image->thumbnail }}  " class="img-responsive" alt="a" />
                  @endif
                <div class="producttitle"><a href="{{ url('/product/'.$product->slug) }}">{{ $product->name }}</a></div>
                <div class="pull-right">
                  @for ($i = 5 - $product->rating ; $i < 5 ; $i++)
                  <a>   <i class="price-text-color fa fa-star"></i></a>
                  @endfor
                  @for ($i = $product->rating ; $i < 5 ; $i++)
                <a>  <i class=" fa fa-star"></i></a>
                  @endfor
                  </div><br />
                <p class="text-justify"></p>
                <address class="ellipsis">
                    <strong>{{ $product->description }}</strong><br>
                  </address>
                <address>
                {{ $product->name }}<br>
                  </address>
                <div class="productprice">
                  <div class="pull-right">
                    <input type="button" id="getre" class="btn btn-danger btm-sm " role="button" value="Add to Wishlist">
                  </div>
                  <div class="pricetext">
                    <input type="submit" id="getRequest" class="btn btn-info btm-sm " role="button" value="Add to cart">
                    <a href="{{ url('/product/'.$product->slug) }}" class="btn btm-sm" role="button">More Details <span class="glyphicon glyphicon-zoom-in"></span></a>
                    <!--   <a href="#" class="btn btn-info btm-sm" role="button">Edit <span class="glyphicon glyphicon-cog"></span></a> -->
                  </div>

                </div>
              </div>
            </div>
          </form>
          @endforeach

这是javascript

$(document).ready(function()
{
 $(document).on('submit', '#reg-form', function()
 {
  var data = $("#post_id").val();

  $.ajax({
  type : 'POST',
  url  : '{{url("/ajax")}}',
 data: {'name':data, '_token': $('input[name=_token]').val()},
  success :  function(data)
       {
         $(getRequest).replaceWith('<img id=getRequest width=50 height=40  src= http://www.cuisson.co.uk/templates/cuisson/supersize/slideshow/img/progress.BAK-FOURTH.gif> ');

         setTimeout(function() {
         $(getRequest).replaceWith('  <input type="submit" id="getRequest" class="btn btn-info btm-sm " role="button" value="Add to cart"> ').hide('blind', {}, 500)
       }, 1300);
      console.log(data);
       }
  });
  return false;
 });

});

2 个答案:

答案 0 :(得分:0)

您的产品型号应具有唯一ID。因此,当您遍历所有产品时,应该使用相同的模型ID设置div的id。然后你可以通过$(“。your-product-div”)获取jquery。attr(“id”)

答案 1 :(得分:0)

您正在尝试获取id =&#34; post_id&#34;的元素。您的页面中可能有很多这些元素。你需要获得id =&#34; post_id&#34;这是您当前表单元素中的内容。你可以这样做:

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