关于jQuery的练习

关于jQuery的练习

<!--
    试着使用课程里学到的事件委托,实现每点击一个卡片,在卡片上显示出来卡片里隐藏的数字。

任务

1、 注意事件委托借助了事件冒泡的机制,在父节点添加事件,事件里根据目标对象的不同,执行不同的操作;

2、 注意把文字显示出来的方法,可以通过设置css样式或者增加类,比如使用addClass
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>习题</title>
    <style>
        .cards div {
            float: left;
            margin: 10px;
            width: 100px;
            height: 100px;
            color: #fff;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            text-indent: -9999px;
            background-color: #333;
        }
    </style>
</head>
<body>

<h1>添加事件处理</h1>

<div class="cards">
    <div>43</div>
    <div>21</div>   
    <div>56</div>
    <div>94</div>
    <div>46</div>
    <div>26</div>
    <div>67</div>
    <div>90</div>
    <div>25</div>
    <div>10</div>
    <div>84</div>
    <div>76</div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function () {
        $('div.cards').on('click',function(event){
            $(this).css({'color':'white',});
        })        
    });
</script>
</body>
</html>
为什么我点击卡片不能把数字显示出来?不是已经对div绑定了点击事件,然后改变css的文字颜色,为什么还不能显示数字?


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
Steve007 2019-01-31 11:35:45

同学,你好。你这样写也是可以的。这样写的话css样式也要做相应的修改,将text-indent属性去掉,将文字颜色改为与背景色颜色相同。如图:

http://img1.sycdn.imooc.com//climg/5c526a970001067005940364.jpg

对应的js如下:

http://img1.sycdn.imooc.com//climg/5c526ab500010eed07720160.jpg

这里this是实现不了的,要通过event.target来实现。

这里老师给同学将两个值输出了一下。同学可以进行对比。如图:

http://img1.sycdn.imooc.com//climg/5c526c480001a05604770075.jpg

http://img1.sycdn.imooc.com//climg/5c526c610001614e04580055.jpg

这里的this指向的一直是最外层的.cards盒子,而event.target指向的是触发事件的真正的dom对象,即你点击那个卡片,event.target就指向哪个卡片。

祝学习愉快!

Steve007 2019-01-30 18:04:03

同学,你好。本题是利用 text-indent来控制数字的显示和隐藏 .默认设置的负值比较大 ,这样首行缩进让数字跑出屏幕隐藏 .

http://img1.sycdn.imooc.com//climg/5c51765600014aea05850366.jpg

然后点击的时候 , 把 text-indent设置为0 , 文字就回到原来的位置了 . 希望解答了你的疑惑 ,

修改如下:

http://img1.sycdn.imooc.com//climg/5c51767800016a1d07960169.jpg

祝学习愉快!


  • 提问者 soso_crazy #1
    为什么这样写不能实现?不能用this吗?为什么需要写event.target?$('.cards').on('click',function(){ $(this).css('text-indent',0); })
    2019-01-31 10:59:03
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师