为什么边框不能变红，而且打上字提示也不消失呢
来源：4-3 编程练习
Elisa呀
2020-02-28 01:12:32
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>习题</title>
</head>
<body>
<input type="text" value=""><span></span>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$('input').focus(function(){
$('span')
.text('请输入内容')
.css({
'border-color':'blue'
})
}).blur(function(){
if(!$(this).value){
$('span')
.text('内容不能为空')
.css({
'border-color':'red'
})
}else{
$('span')
.text('')
.css({
'border-color':'red'
})
}
})
</script>
</body>
</html>
3回答
-
好帮手慕星星
2020-02-29
同学你好，第二段代码并没有实现效果，参考如下：
当不输入内容的时候，边框是绿色的，说明不执行if语句
自己可以输出下$(this).value的结果是undefined，与空字符串并不相等，所以永远执行else语句。
祝学习愉快！
0 -
好帮手慕星星
2020-02-28
同学你好，问题解答如下：
1、jquery中获取表单元素值用的是val()方法，元素.value是js中的，不能混用哦
2、验证有内容之后需要将边框变为绿色，如下修改
3、！$(this).value取反也是一样的道理，需要使用val()方法
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0h020-02-29 -
Elisa呀
提问者
2020-02-28
我知道了，改出来了，但是为啥判断里不能用 ！$(this).value 呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>习题</title>
</head>
<body>
<input type="text" value=""><span></span>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$('input').focus(function(){
$('span').text('请输入内容')
$('input').css({
'border-color':'blue'
})
}).blur(function(){
if($(this).value==''){
$('span').text('内容不能为空')
$('input').css({
'border-color':'red'
})
}else{
$('span').text('')
$('input').css({
'border-color':'red'
})
}
})
</script>
</body>
</html>
0
相似问题
回答 2
回答 3