验证码点击更新的问题
来源：6-4 实现验证码验证
xiaoyuan1
2020-02-21 21:20:49
<script>
$('.verify-code-img').click(function () {
$(this).attr('src', $(this).attr('data-src') + '?t=' + new Date().getTime())
})
</script>
老师，我见问答区的解释说：$(this)表示当前通过$('.verify-code-img')得到的元素即img标签。$(this).attr('src' ); 获取节点属性名src的值。
data-src为自定义属性，存放真正需要显示的图片路径，当点击验证码图片时，用js取到该图片的data-src的值赋给src。
$(this).attr('src' , 这个我明白，但是后面的 $(this).attr('data-src') + '?t=' + new Date().getTime()我不太明白data-src自定义属性和src的值不是一样吗，怎么实现的存放真正需要显示的图片路径的；当点击验证码图片时，用js取到该图片的data-src的值又是怎么赋值给src的
1回答
-
同学，你好。
首先需要明确的是，data-src自定义属性和src的值是不一样的。通俗一点说就是创建一个自定义属性data-src存放真正需要显示的图片路径（也就是点击了验证码图片发送了更新请求后返回的图片），而img自带的src放一张大小为1 * 1px的图片路径（也就是默认的图片、第一次显示出的验证码图片，但若图片被点击，则需要借助src-data属性中存储的值来进行重新赋值），课程中的两个属性的图片存放路径是一样的，也就是说在未点击验证码时的图片和点击验证码进行了更新的图片都是存放的同一个路径。
$(this).attr('src', $(this).attr('data-src') + '?t=' + new Date().getTime())就是实现了点击验证码图片，进行更新显示的功能。
如果我的回答解决了您的疑惑，请采纳！祝~学习愉快~
0
相似问题