显示与从控制器获取的字符串对应的 div 标记

Question

我的html中有这三个div标签。

<div class="alert alert-success alert-dismissible" role="alert" style="display: none;">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>Success!</strong> Data inserted into OVERRIDE table.
</div>
<div class="alert alert-warning alert-dismissible" role="alert" style="display: none;">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>Heads up!</strong> Few roles failed. SourceIDs of $uploadResult$ policies mentioned in UI are already present. 
</div>
<div class="alert alert-danger alert-dismissible" role="alert" style="display: none;">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>Snap!</strong> All sourceIDs are already present in OVERRIDE table. 
</div>

带有提交按钮，在 js 中调用提交(参数(函数。确实如此，

$scope.submit = function(employees) {
$http({
'url' : '/updateOverride',
'method' : 'POST',
'headers': {'Content-Type' : 'application/json'},
'data' : $scope.employees
}).success(function(employees){
$scope.marketForm.texts.push({'text' : employees.text});
/*$scope.responseMap = employees;*/
/* document.getElementById('msgTimeout').style.display = "block";
$( "#msgTimeout" ).load(window.location.href + " #msgTimeout" );*/
})
};

我现在有这个控制器方法，它返回 3 个字符串成功、警告或危险中的任何一个。

@RequestMapping(value = "/updateOverride", method = RequestMethod.POST, consumes=MediaType.APPLICATION_JSON_VALUE)
@ResponseStatus(HttpStatus.OK)
public @ResponseBody Map<String, Object> addNewElement(@RequestBody String overrideData) throws JsonParseException, JsonMappingException, IOException{
System.out.println(overrideData);
DBController dbController = new DBController();
Map<String, Object> resultMap = new HashMap<String, Object>();
String insertResult = dbController.mapJSONObject(overrideData);
System.out.println("nInsert result:: -> "+insertResult + "n");
resultMap.put("updateOverride", insertResult);
return resultMap;
}
}

我希望显示相应的div 标签，相对于从控制器获得的字符串。(即(如果成功，应显示第一个div，如果为警告，则应显示第二个div，如果为危险，则应显示第三个div。

有没有办法做到这一点？

Answer 1

为什么不给所有三个div 都像

<div id="alert_success" class="alert alert-success alert-dismissible" role="alert" style="display: none;">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>Success!</strong> Data inserted into OVERRIDE table.
</div>
<div id="alert_warning" class="alert alert-warning alert-dismissible" role="alert" style="display: none;">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>Heads up!</strong> Few roles failed. SourceIDs of $uploadResult$ policies mentioned in UI are already present. 
</div>
<div id="alert_danger" class="alert alert-danger alert-dismissible" role="alert" style="display: none;">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>Snap!</strong> All sourceIDs are already present in OVERRIDE table. 
</div>

然后在成功回调函数中

success(function(employees){
$scope.marketForm.texts.push({'text' : employees.text});
$(".alert").hide();
var message = employees.text.toLowerCase(); // **assuming SUCCESS**
$("#alert_"+message).show()

})

Answer 2

只需构建一个包含要显示的div 类型的字符串，使用该字符串作为 CSS 选择器，然后使用您最喜欢的 DOM 操作机制(jQuery 等(将display属性从none更改为适合您的页面的任何属性。

selector = ".alert.alert-" + type + ".alert-dismissible"
$(selector).Show(...)