Question

我试图展示＆＃34;没有数据＆＃34;在我的div中间，使用以下内容：

  $errorDiv = $('<div>NO  DATA</div>').addClass('NoData');
  $("#pieChart").html($errorDiv.html());

这是班级：

.NoData{
    margin-top:15%;
    background-color:lightblue;   
    width: 100%;
        }

但是这只写了文本，没有我在课堂上设置的颜色和位置

父CSS：

.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}

和HTML：

 <div class="card" style="float:left;width:20%">
         <div id="pieChart" style="height:350px"></div>           
      </div>

Answer 1

您遇到的问题是因为$errorDiv.html()不包含$errorDiv的外部html

有很多方法可以做到：

$errorDiv = $('<div>NO  DATA</div>').addClass('NoData');
$("#pieChart").html($errorDiv);

或

$errorDiv = $('<div>NO  DATA</div>').addClass('NoData');
$("#pieChart").html($errorDiv[0].outerHTML);

工作演示

＆＃13;

$errorDiv = $('<div>NO  DATA</div>').addClass('NoData');
$("#pieChart").html($errorDiv);

＆＃13;

.NoData {
  margin-top: 15%;
  background-color: lightblue;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card" style="float:left;width:20%">
  <div id="pieChart" style="height:350px"></div>
</div>

＆＃13;

更新了演示

＆＃13;

$errorDiv = $('<div>NO  DATA</div>').addClass('NoData');
$("#pieChart").html($errorDiv).parent().addClass('color');

＆＃13;

.NoData {
  padding-top: 15%;
  background-color: lightblue;
  width: 100%;
}

.color {
  background-color: lightblue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card" style="float:left;width:20%">
  <div id="pieChart" style="height:350px"></div>
</div>

＆＃13;

使用jquery添加类没有任何效果

1 个答案: