bootstrap的icon不能正常显示
我直接让icon 在input上显示可以显示，但是我想一开始先不设置icon，当点击登录按钮以后，如果没有用户名，我就创建一个span标签，并且给有form-group的元素加has-warning和has-feedback，让他显示警告icon,结果腾出了icon的位置，但是并没有显示。
一开始显示icon的代码如下：
<div class="form-group form-inline" id="form-group">
<div class="form-group has-warning has-feedback" id="LabelUser">
<label class="sr-only control-label" for="user">用户名</label>
<input class="form-control" type="text" id="user" placeholder="请填写用户名">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group" id="LabelPass">
<label class="sr-only control-label" for="pass">密码</label>
<input class="form-control" type="password" id="pass" placeholder="请填写密码">
</div>
<input class="btn btn-success" type="button" id="login" value="登录">
<input class="btn btn-warning" type="button" id="reg" value="注册">
</div>
效果如图：
能显示说明路径没有错误
我想要的点击之后创建span标签的代码如下:
<body>
<div class="form-group form-inline" id="form-group">
<div class="form-group" id="LabelUser">
<label class="sr-only control-label" for="user">用户名</label>
<input class="form-control" type="text" id="user" placeholder="请填写用户名">
</div>
<div class="form-group" id="LabelPass">
<label class="sr-only control-label" for="pass">密码</label>
<input class="form-control" type="password" id="pass" placeholder="请填写密码">
</div>
<input class="btn btn-success" type="button" id="login" value="登录">
<input class="btn btn-warning" type="button" id="reg" value="注册">
</div>
<!-- BootStrap -->
<!-- 注意，引用的东西都要在www文件夹里面，都是从www里面拿的 -->
<script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<!-- BootStrap end -->
<script src="ajax.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
let oTxtUser = document.getElementById("user");
let oTxtPass = document.getElementById("pass");
let oBtnReg = document.getElementById("reg");
let oBtnLogin = document.getElementById("login");
let oLabelUser = document.getElementById("LabelUser");
let oLabelPass = document.getElementById("fLabelPass");
oBtnLogin.onclick = function(){
ajax({
url:"/user",
data:{act: "login", user: oTxtUser.value, pass: oTxtPass.value},
type:"get",
success: function(str){
let json = eval("("+str+")");
if(json.ok){
alert("登录成功");
}else if(json.msg == "此用户不存在"){
alert("登录失败:" + json.msg);
// debugger;
//如果上一次有错，先清除上一次的oLabelUser和添加的span
let len = oLabelUser.getElementsByTagName("span").length; //通过个数判断有没有span标签
if(len > 0){
let oSpan = oLabelUser.getElementsByTagName("span")[0];
oLabelUser.removeChild(oSpan);
oLabelUser.setAttribute("class", "form-group");
}
//给oLabelUser添加警告class
oLabelUser.setAttribute("class", "form-group has-warning has-feedback");
//创建span标签 为了显示提示标签
let oSpan = document.createElement("span");
oSpan.setAttribute("calss", "glyphicon glyphicon-warning-sign form-control-feedback");
oLabelUser.appendChild(oSpan);
}
},
error: function (){
alert("通信错误");
},
});
};
oBtnReg.onclick = function(){
ajax({
url:"/user",
data:{act: "reg", user: oTxtUser.value, pass: oTxtPass.value},
type:"get",
success: function(str){
let json = eval("("+str+")");
if(json.ok){
alert("注册成功");
}else{
alert("注册失败:" + json.msg);
}
},
error: function (){
alert("通信错误");
},
});
};
};
</script>
</body>效果如图：
登录前：
登陆后：
可以看出来登陆后的用户名框明显长了一节，那个就是多出来的icon的地方，但是icon并没有显示出来，请问这个应该怎么改？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
calss是什么鬼，typo吧？
将
改为