jquery每个选择器和ajax没有产生正确的结果。

Question

我试图简化我的代码，但是当它放置在每个循环中时，它会遇到一些不工作的问题。

下面是我要做的事情：- html有n个父DIV，它通过AJAX调用生成一个报表来提取数据--每个div各自使用一个数据属性来定义基于数据的报告，而不是报告的结果，它应该用相应的结果填充html。

HTML代码(为了简化，使用n= 2)：

<div class="widget-box widget-hits card no-border bg-white no-margin" data-widget-report="widget-hits">
  <div class="container-xs-height full-height">
    <div class="row-xs-height">
      <div class="col-xs-height col-top">
        <div class="card-header top-left top-right">
          <div class="card-title text-black hint-text">
            <span class="font-montserrat fs-11 all-caps">Weekly Hits
                      <i class="far fa-chevron-right p-l-5"></i>
                    </span>
          </div>
          <div class="card-controls">
            <ul>
              <li>
                <a data-toggle="refresh" class="card-refresh text-black" href="#">
                  <i class="far fa-circle fa-xs"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="row-xs-height ">
      <div class="col-xs-height col-top relative">
        <div class="row">
          <div class="col-sm-6">
            <div class="p-l-20 widget-total">
              <h3 class="no-margin p-b-5"></h3>
              <p class="small hint-text m-t-5">
                <span class="label m-r-5">%</span>
              </p>
            </div>
          </div>
          <div class="col-sm-6">
          </div>
        </div>
        <div class="widget-chart"></div>
      </div>
    </div>
  </div>
</div>

<div class="widget-box widget-sales card no-border bg-white no-margin" data-widget-report="widget-sales">
  <div class="container-xs-height full-height">
    <div class="row-xs-height">
      <div class="col-xs-height col-top">
        <div class="card-header top-left top-right">
          <div class="card-title text-black hint-text">
            <span class="font-montserrat fs-11 all-caps">Weekly Sales
                      <i class="far fa-chevron-right p-l-5"></i>
                    </span>
          </div>
          <div class="card-controls">
            <ul>
              <li>
                <a data-toggle="refresh" class="card-refresh text-black" href="#">
                  <i class="far fa-circle fa-xs"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="row-xs-height ">
      <div class="col-xs-height col-top relative">
        <div class="row">
          <div class="col-sm-6">
            <div class="p-l-20 widget-total">
              <h3 class="no-margin p-b-5"></h3>
              <p class="small hint-text m-t-5">
                <span class="label m-r-5">%</span>
              </p>
            </div>
          </div>
          <div class="col-sm-6">
          </div>
        </div>
        <div class="widget-chart"></div>
      </div>
    </div>
  </div>
</div>

联署材料：

$('.widget-box').each(function() {
  $widget_report = $(this).data('widget-report');
  if ($widget_report !== undefined) {
    $.ajax({
      type: 'get',
      url: '/admin/reports/' + $widget_report,
      dataType: 'json',
      success:
        function(data) {
          if (data.success) {
            var labelsData = [];
            var seriesData = [];
            var trend = data.trend * 100;
            widget_class = '.' + $widget_report + ' .widget-chart';
            console.log(widget_class);
            $(this).find('.widget-total h3').text(data.total);
            $(this).find('.widget-total p span').text(trend + '%');
            trend_span = $(this).find('.widget-total p').children('span');
            if(data.trend  > 0) {
              $(this).find('.widget-total p span.label').addClass('label-success');
              $(this).find('.widget-total p').text('Higher');
            }
            else {
              $(this).find('.widget-total p span.label').addClass('label-important'); 
              $(this).find('.widget-total p').text('Lower');
            }
            $(this).find('.widget-total p').prepend(trend_span);
            $.each(data.values, function(key, value){
              date = new Date(value.label + 'T00:00:00');
              labelsData.push(date.getMonth() + 1 + '/' + date.getDate());
              seriesData.push(value.value);
            });
            chartData = {
              labels: labelsData,
              series: [seriesData]
            }

            alert(widget_class);

            new Chartist.Bar(widget_class, chartData, {
              axisX: {
                showGrid: false
              },
              axisY: {
                showGrid: false,
                showLabel: false
              }
            });
          }
        }
    });
  }
});

以下是我遇到的问题：

1. $(This).find(‘.小部件-总h3').text没有更新相应的DIV组
2. 由于某种原因，widget_class总是返回最后一个DIV组.即使最后一个DIV组返回data.success = false。上面将返回小部件-销售两次，而不是小部件-点击，然后小部件-销售。

我在抓我的头.我能够让它在没有.each循环的情况下工作，并为每个循环创建一个.但是希望这是通用的，并允许控件依赖于html上的数据-小部件-报告属性。

这是正确的做法吗？

任何帮助/指导都很感激.

Answer 1

在widget_class和$widget_report前面添加widget_class和$widget_report，以便将它们的作用域限定为函数而不是全局函数。我想这会解决你的问题。现在，即使在ajax调用完成之前，$widget_report就被最后一个小部件替换了。

对于不能工作的$(this)，您必须在进行ajax调用之前将其赋值给一个变量。

$('.widget-box').each(function() {
  var widgetBoxElement = $(this);
  var $widget_report = $(this).data('widget-report');
  if ($widget_report !== undefined) {
    $.ajax({
      type: 'get',
      url: '/admin/reports/' + $widget_report,
      dataType: 'json',
      success:
        function(data) {
          if (data.success) {
           // use widgetBoxElement here instead of $(this)

          }
        }
    });
  }
});