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

我现在有了这个控制器方法，它返回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;
    }
}

我希望显示相应的div标签，相对于从控制器获得的字符串。（即）如果 SUCCESS ，则应显示第一个div，如果 WARNING ，则应显示第二个div，如果 DANGER ，则显示第三个。< / p>

有没有办法实现这一目标？

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


            })

Answer 2

只需构建一个包含要显示的div类型的字符串，将该字符串用作CSS选择器，然后使用您喜欢的DOM操作机制（jQuery等）来更改display属性从none到适合您网页的内容。

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

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

2 个答案: