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
              }
            });
          }
        }
    });
  }
});

以下是我遇到的问题：

$（this）.find（'。widget-total h3'）。text未更新相应的DIV组
widget_class由于某种原因总是返回最后一个DIV组...即使最后一个DIV组正在返回data.success = false。例如：上面将返回widget-sales两次，而不是widget-hits然后是widget-sales。

我在这个问题上摸不着头脑...我能够在没有.each循环的情况下让它工作，并且每个人都独一无二地创造一个...但是希望能够使这个通用并允许控制依赖于html上的data-widget-report属性。

这是正确的做法吗？

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

Answer 1

在var和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)

          }
        }
    });
  }
});

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

1 个答案: