在javascript中将一个类的css分配给另一个类的css答案

【问题标题】：Assign the css of a class to another class's css in javascript在javascript中将一个类的css分配给另一个类的css
【发布时间】：2017-02-09 13:23:37
【问题描述】：

我必须动态生成一个 div。我正在使用 引导面板 来显示 div。 div 的类可以是以下两者之一：panel panel-success 或 panel panel-danger，这取决于我从服务器获得的响应数据。服务器响应是成功或失败。

我想将类 success 或 failure 分配给上面的 div 并且在我的 css 文件中，我想说类 success相当于panel panel-success，类failure相当于panel panel-danger

我正在使用 ui-grid，我所说的 div 是网格的单元格之一。它在 statusTemplate1、statusTemplate2 和 statusTemplate3 中定义。下面是代码：

Javacsript 文件

angular.module('Spectacle', ['ui.grid'])
.controller('SpectacleCtrl',
function($scope, $http, $q) {
$scope.loaded = true;
$scope.myData = [];
var statusTemplate1 = '<div class="panel panel-success">{{row.entity.build1.number}} <span class="label label-success">P-{{row.entity.build1.passCount}}</span> <span class="label label-danger">F-{{row.entity.build1.failCount}}</span> <span class="label label-warning">S-{{row.entity.build1.skipCount}}</span></div>';
var statusTemplate2 = '<div class="panel panel-success">{{row.entity.build2.number}} <span class="label label-success">P-{{row.entity.build2.passCount}}</span> <span class="label label-danger">F-{{row.entity.build2.failCount}}</span> <span class="label label-warning">S-{{row.entity.build2.skipCount}}</span></div>';
var statusTemplate3 = '<div class="panel panel-success">{{row.entity.build3.number}} <span class="label label-success">P-{{row.entity.build3.passCount}}</span> <span class="label label-danger">F-{{row.entity.build3.failCount}}</span> <span class="label label-warning">S-{{row.entity.build3.skipCount}}</span></div>';
$scope.gridOptions = { data: 'myData',rowHeight:62 };
$scope.gridOptions.columnDefs = [
                   { field: 'job' },
                   { field: 'build1',cellTemplate: statusTemplate1},
                   { field: 'build2',cellTemplate: statusTemplate2},
                   { field: 'build3',cellTemplate: statusTemplate3},
                   { field: 'build4'},
                   { field: 'build5'}
                 ];

function fnGetList(url)
{
  var deferred = $q.defer();
$http.get(url)
.success(function (data)
{
console.log("Data: " + data.buildList[0].number);
deferred.resolve(data);
});
return deferred.promise;
};

$scope.GetGridData = function ()
{
console.log("In GetGridData: " + "Getting the data");
$http.get('http://localhost:8989/api/job').
    then(function(response) {
        $scope.totalJobs = 2;
        $scope.totalBuilds = 5;
        console.log($scope.totalJobs);
        $scope.jobs = response.data.jobs;
        $scope.loaded = false;
        console.log($scope.jobs);
        console.log('size of the response data:'+ response.data.jobs.length +' ');
        for(var i=0; i<response.data.jobs.length; i++)
        {
          console.log('The jobid for job '+i+' is:'+response.data.jobs[i].id);
          var url = "http://localhost:8989/api/job/"+response.data.jobs[i].id+"";
          fnGetList(url).then(function (content)
          {
              //  Assuming your content.data contains a well-formed JSON
              console.log('Content: '+content.name);
              if (content !== undefined)
              {
                console.log('promise success: '+content);
                console.log('printing grid options:'+$scope.gridOptions.data);
                $scope.myData.push({
                  "job": content.name,
                  "build1": content.buildList[0],
                  "build2": content.buildList[1],
                  "build3": content.buildList[2]
                  // "build4": content.buildList[3].number,
                  // "build5": content.buildList[4].number
                });
              }
          });
        }
    });
};
});

HTML 代码

<div class="gridStyle" ui-grid="gridOptions" ng-init="GetGridData()"></div>

【问题讨论】：

你的代码在哪里？
另外还不清楚您是想在 CSS 还是 JS 中执行此操作。如果您的意思是将一个 CSS 类分配给另一个，那么它并不是真正的 possible without a preprocessor like SASS or LESS。如果您的意思是使用 JS，那么您只需将面板“panel-success”指定为成功，将“panel-danger”指定为失败，并且您不需要另一个 CSS 类。
@void 添加了代码
@ZimSystem 我想用 CSS 来做
if(response=="success") { $('.gridStyle').addClass('panel panel-success') } else { $('.gridStyle').addClass('panel panel-danger') } 有什么问题？？（或类似的东西，如果你不使用 jquery）

标签： javascript html css twitter-bootstrap

【解决方案1】：

这就是我修复它的方法：

'<div ng-class="\'{{row.entity.build2.status}}\'? \'panel panel-success\' : \'panel panel-danger\'">{{row.entity.build2.number}} <span class="label label-success">P-{{row.entity.build2.passCount}}</span> <span class="label label-danger">F-{{row.entity.build2.failCount}}</span> <span class="label label-warning">S-{{row.entity.build2.skipCount}}</span></div>';

将条件语句 (condition?true:false) 与 ng-class

一起使用

【讨论】：