javascript - 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>

JS:

$('.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('.widget-total h3').text 未更新相应的 DIV 组
2. widget_class 由于某种原因总是返回最后一个 DIV 组...即使最后一个 DIV 组返回 data.success = false。例如:上面将返回 widget-sales 两次，而不是 widget-hits，然后返回 widget-sales。

我对这个感到摸不着头脑...我能够在没有 .each 循环的情况下让它工作，并为每个循环独特地创建一个...但希望使这个通用并允许控制依赖于html 上的 data-widget-report 属性。

这是正确的方法吗？

感谢任何帮助/指导...

Answer 1

在 widget_class 和 $widget_report 前面添加 var，以便它们的作用域限于函数而不是全局。我认为这会解决你的问题。现在，即使在 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)

          }
        }
    });
  }
});