javascript - 显示从 Controller 获取的字符串对应的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中的submit(parameter)函数。确实如此，

$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" );*/
            })
        };

我现在有这个 Controller 方法，它返回 3 个字符串 SUCCESS、WARNING 或 DANGER。

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

我希望根据从 Controller 获取的字符串显示相应的 div 标签。 (即)如果成功，则应显示第一个div，如果警告，则应显示第二个div，如果危险，则应显示第三个。

有没有办法实现这一点？

Answer 1

为什么不给所有三个 div 像这样的 id

<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()


            })