javascript - AJAX 数据返回和动态更改元素

Question

我的页面上有下表，有多行，但为了保持简短，我将其配对为一行。

<tr id="668">
  <td class="tableCheckBox"><div class="icheckbox_flat-blue" style="position: relative;"><input class="sendCheckbox" name="send[]" value="668" form="sendBillsForm" style="position: absolute; opacity: 0;" type="checkbox"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins></div></td>
  <td class="manifestNo">0882129</td>
  <td class="DriverName">Thomas Bryant<br><button type="button" class="btn btn-default arrivalDetailsButton" data-button="668">Signature</button></td>
  <td class="truckMake">54792</td>
  <td class="truckColor">Red</td>
  <td style="text-align: center" class="arrivedStatus"><div style="font-size:16px; font-weight: bold">6:32 AM</div>March 7, 2018<br>
    <div class="unloadStatusSpan">
      <span class="label bg-red">IN QUEUE</span>
    </div>
  </td>
  <td><div class="btn-group-vertical">
    <button type="button" class="btn btn-warning arrivalNotifyButton" data-button="668"><i class="fa fa-envelope"></i> Notify</button>
    <button type="button" class="btn btn-success arrivalStatusButton" data-button="668"><i class="fa fa-tasks"></i> Status</button>
  </div></td>
</tr>

现在，当我单击类为 arrivalStatusButton 的按钮时，它会弹出一个模式，您可以在其中选择状态。从那里您单击提交，它将其发布到数据库，并且应该更改 div 类 unloadStatusSpan 中表行中的状态范围。

下面是我的脚本，其中包括首先打开模式，然后提交数据，其中返回的操作应该使用成功 POST 中返回的任何内容来更改范围。不幸的是，当我使用它时，数据已成功发布，但跨度未成功更改。

$(document).ready(function(){

  $('.arrivalStatusButton').click(function(){
    var arrivalID = $.parseJSON($(this).attr('data-button'));
    $('.modal-title').text('Change Arrival Status');
    $('#arrivalStatus').modal('show');
    $('#arrivalStatusBody').html('<select name="arrivalStatus"><option value="1">In Queue</option><option value="2">Unloading</option><option value="3">Unloaded</option><option value="4">Delayed</option><option value="5">Other</option>');
    $('.modal-footer').html('<button type="button" class="btn btn-success changeArrivalStatus" id="changeArrivalStatus" data-dismiss="modal" data-button="'+arrivalID+'"><span id="" class="glyphicon glyphicon-check"></span> Change Arrival Status</button><button type="button" class="btn btn-default" data-dismiss="modal">Close</button>');
  });

  $(document).on("click", ".changeArrivalStatus", function(){
    var $a = $(this);
    var $arrivalID = $.parseJSON($a.attr('data-button'));
    $.ajax({
      type:'POST',
      url: '/carrier/dispatch/arrivals/statusChange',
      dataType:'json',
      data: {
        'arrivalStatus':$('select[name=arrivalStatus]').val(),
        'arrival': $arrivalID,
        '_token': $('input[name=_token]').val(),
      },
      success: function(data) {
        $('.errorTitle').addClass('hidden');
        $('.errorContent').addClass('hidden');

        if ((data.errors)) {
          setTimeout(function () {
            $('#createOrigin').modal('show');
            toastr.error('Check your inputs!', 'Error Alert', {timeOut: 5000});
          }, 500);

          if (data.errors.title) {
            $('.errorTitle').removeClass('hidden');
            $('.errorTitle').text(data.errors.title);
          }
          if (data.errors.content) {
            $('.errorContent').removeClass('hidden');
            $('.errorContent').text(data.errors.content);
          }
        } else { //THIS "SUCCESS ALERT" WORKS TOO, but just beneath it, where I search for the element to change, nothing happens...//
          toastr.success('The arrival status has been successfully changed.', 'Success Alert', {timeOut: 5000});
          var $statusSpan = $document.find("tr[id='"+$arrivalID+"']").children('.unloadStatusSpan');
          if(data.details.unloadStatus == 1){
            $statusSpan.html('<span class="label bg-red unloadStatusSpan">IN QUEUE</span>');
          }
          if(data.details.unloadStatus == 2){
            $statusSpan.html('<span class="label bg-yellow unloadStatusSpan">UNLOADING</span>');
          }
          if(data.details.unloadStatus == 3){
            $statusSpan.html('<span class="label bg-green unloadStatusSpan">UNLOADED</span>');
          }
        }
      },

      error: function (jqXHR, textStatus, errorThrown) {
        if (jqXHR.status == 500) {
          alert('Internal error: ' + jqXHR.responseText);
        } else {
          console.log('An error has occured.');
        }
      }
    });
  });
});

Answer 1

https://api.jquery.com/children/说

.children() only travels a single level down the DOM tree

但是，在您的 DOM 中，“unloadStatusSpan”比您的 tr 低两级(td 是第一级)。

var $statusSpan = $document.find("tr[id='"+$arrivalID+"']").children('.unloadStatusSpan');

可以简单地更改为

var $statusSpan = $("#"+$arrivalID+" .unloadStatusSpan");