老师，问题如下。

来源：2-2 编程练习

Sherlock_bourne

2019-06-02 05:14:07

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>点击事件</title>
    <style type="text/css">
    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>43</div>
    <div>21</div>
    <div>56</div>
    <div>16</div>
    <div>89</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>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
    //此处写代码
    
    // 方法一：
    // $('div').click(function() {
    //     $('div').eq($(this).index()-1).css('text-indent','0')
    // });
    
    // 方法二：
    $('div').click(function() {
        $(this).css('text-indent','0')
    });
    </script>
</body>
</html>

1，为什么$('div').eq($(this).index()-1)=$(this) ?

2，text-indent不是缩进么？为什么缩进可以用来显示图片里面数字，这是什么原理？text-indent的值默认的好像就是0吧，为什么还要写上？

3，如果是只显示刚被点击的那张图里的数字，其他图中数字不显示，如何写？

4，此例中，div里面直接就是文字，但假如是<div><span>45</span></div>，此时还能用text-indent不？此时有没有其他方式实现点击显示45效果？

5，关于显示隐藏，有透明度法，display法，还有这个我才知道的text-indent法，目前有点凌乱了，不知道什么时候用什么法。例如这题我一上来是用display，没效果才来评论区看看的（谁知道一看更晕了。。。）。

写回答

1回答

好帮手慕慕子

2019-06-02

已采纳

同学你好

$('div')表示找到所有的div， $(this).index()表示当前点击的div的索引，这个索引是从1开始计算的。eq()方法表示查找指定索引值的元素，这里的索引是从0开始计算的。所以($(this).index() - 1表示找到当前div的位置减去1，然后将索引值传入eq方法中，就能找到当前的div
text-indent 属性规定文本块中首行文本的缩进，允许使用负值。如果使用负值，那么首行会被缩进到左边，就达到看不见的效果。设置为0，也就显示出来了。text-indent默认是0，但是因为这里一开始设置负值让数字达到看不见的效果，点击的时候，设置为0, 才能数字现实出来。
可以通过siblings方法找到其他的div，设置text-indent为负值，实现是有当前被点击得问div中显示数字，示例：
<div><span>43</span></div>这种也是可以使用text-indent的方式实现。
其他方法可以参考如下思路：先给span元素设置display:none;全部隐藏，点击的时候修改对应的span元素的display属性为block;显示出来，其他span元素设置display:none;
编程是灵活的，一种效果可以有多种实现方式，同学觉得不知道什么时候用什么方法，还是由于练习的太少，对知识掌握的不牢固，不能做到灵活应用，建议：要多练习，多总结做笔记，学习新知识的同时，也要复习前面所学的知识。编程是没有捷径的，只有坚持下去多练习多积累，等知识积累到一定的程度了，就不会有这种困惑了