jquery没有在laravel中显示数据

Question

我想创建一个购物车系统，我想在其中根据会员编号显示数据。我完美地从控制器获取数据，但它没有以 HTML 格式显示。我在这里分享控制台结果：

$(document).ready(function() {
      var get_price_per_head;
      var members;

      $('.increment').on('click', function(e) {
        e.preventDefault();
        var quantity = $(this).parent('div').find('.qua').html();
        var package_type_id = $(this).parent('div').find('.package_type_id').val();
        var increased_val = parseInt(quantity) + 1;
        console.log(package_type_id);
        $(this).parent('div').find('.qua').html(increased_val);

        $.ajax({
          url: 'get_package_type_price',
          method: 'GET',
          data: {
            package_type_id: package_type_id,
            member_number: increased_val
          },
          dataType: 'json',
          success: function(data) {
            get_price_per_head = data.get_price_per_head;
            console.log(get_price_per_head);
            $(this).parent("div").find(".price_per_head").html(get_price_per_head);
          }
        });
      })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item-grp">
  <p>Total Members</p>
  <div class="btn-grp" data-id="{{ $id }}">
    <button class="btn-outline-dark update-cart-button 
                                        decrement" id="decrement">-</button>
    <strong><span class="qua" id="quantity"> 
                                         {{$details['number_of_members']}}</span></strong>
    <button class="btn-outline-dark update-cart-button 
                                         increment" id="increment">+</button>
    <input type="hidden" class="package_type_id" value=" 
                                    {{$details['package_type_id']}}">
  </div>
</div>

<div class="item-grp" data-id="{{ $id }}">
  <p>Cost Per-member</p>
  <strong>$<span class="price_per_head">{{ 
                                    $details['price_per_head'] }}</span></strong>
</div>

$(this).parent("div").find(".price_per_head")的控制台截图

Answer 1

尝试先清空 div 然后追加：

$('.price_per_head').empty();

$('.price_per_head').append(get_price_per_head);

这将清空具有类price_per_head 的范围内的内容，然后附加您的get_price_per_head 值

如果是内部循环，请尝试为每个循环指定一个唯一的类名。

Answer 2

AJAX 更改了 this scope，因此您可以这样做：

$(document).ready(function() {
      var get_price_per_head;
      var members;

      $('.increment').on('click', function(e) {
        e.preventDefault();
        var quantity = $(this).parent('div').find('.qua').html();
        var package_type_id = $(this).parent('div').find('.package_type_id').val();
        var increased_val = parseInt(quantity) + 1;
        console.log(package_type_id);
        $(this).parent('div').find('.qua').html(increased_val);

        $.ajax({
          url: 'get_package_type_price',
          method: 'GET',
          data: {
            package_type_id: package_type_id,
            member_number: increased_val
          },
          dataType: 'json',
          success: function(data) {
            get_price_per_head = data.get_price_per_head;
            console.log(get_price_per_head);
            $(e.target).parent("div").find(".price_per_head").html(get_price_per_head);
          }
        });
      })
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item-grp">
  <p>Total Members</p>
  <div class="btn-grp" data-id="{{ $id }}">
    <button class="btn-outline-dark update-cart-button 
                                        decrement" id="decrement">-</button>
    <strong><span class="qua" id="quantity"> 
                                         {{$details['number_of_members']}}</span></strong>
    <button class="btn-outline-dark update-cart-button 
                                         increment" id="increment">+</button>
    <input type="hidden" class="package_type_id" value=" 
                                    {{$details['package_type_id']}}">
  </div>
</div>

<div class="item-grp" data-id="{{ $id }}">
  <p>Cost Per-member</p>
  <strong>$<span class="price_per_head">{{ 
                                    $details['price_per_head'] }}</span></strong>
</div>

如果您想继续使用this：

function onSuccess(data) {
    get_price_per_head = data.get_price_per_head;
    console.log(get_price_per_head);
    $(this).parent("div").find(".price_per_head").html(get_price_per_head);
}

$(document).ready(function() {
      var get_price_per_head;
      var members;

      $('.increment').on('click', function(e) {
        e.preventDefault();
        var quantity = $(this).parent('div').find('.qua').html();
        var package_type_id = $(this).parent('div').find('.package_type_id').val();
        var increased_val = parseInt(quantity) + 1;
        console.log(package_type_id);
        $(this).parent('div').find('.qua').html(increased_val);

        $.ajax({
          url: 'get_package_type_price',
          method: 'GET',
          data: {
            package_type_id: package_type_id,
            member_number: increased_val
          },
          dataType: 'json',
          success: onSuccess.bind(this)
        });
      })
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item-grp">
  <p>Total Members</p>
  <div class="btn-grp" data-id="{{ $id }}">
    <button class="btn-outline-dark update-cart-button 
                                        decrement" id="decrement">-</button>
    <strong><span class="qua" id="quantity"> 
                                         {{$details['number_of_members']}}</span></strong>
    <button class="btn-outline-dark update-cart-button 
                                         increment" id="increment">+</button>
    <input type="hidden" class="package_type_id" value=" 
                                    {{$details['package_type_id']}}">
  </div>
</div>

<div class="item-grp" data-id="{{ $id }}">
  <p>Cost Per-member</p>
  <strong>$<span class="price_per_head">{{ 
                                    $details['price_per_head'] }}</span></strong>
</div>