javascript - Jquery'this'选择器问题

Question

我有个问题：

当我点击我的 '.glass' div 时，它会打开多个 '.permalinks' div，但我只想打开我点击的那个。

这是我的代码：

    <script type="text/javascript">
    $(window).ready(function() {
        $('.glass').click(function() {
            $('.permalinks').slideToggle(function() {
            });
        });
    });
    </script>

这是CSS：

    .permalinks {
        display:none;
        position:absolute;top:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,.7);
    }

    .reblog, .link, .like {
        display:inline-block;
        margin:2%;
        margin-top:45%;
        padding:7% 7% 4% 7%;
    }

    .reblog, .link, .like {
        width:10%;
    }

    .reblog {
        background:#317FD4;
    }

    .link {
        background:#38C264;
    }

    .like {
        background:#ED4A4A;
    }

    .glass {
        position:absolute;
        top:0;
        left:0;
        background:#f3f3f3;
    }

这是html：

      <div class="permalinks">

      <div class="reblog"><center><img src=""></center></div>

      <div class="link"><center><img src=""></center></div>

      <div class="like"><center><img src=""></center></div>

      </div>

      <img class="glass" src="" width="5%">

如果你能告诉我我做错了什么，请。

Answer 1

将点击处理程序分配给.permalinks并使用$(this).slideToggle()

$(window).ready(function() {
    $('.permalinks').click(function() {
        $(this).slideToggle();
    });
});

http://jsfiddle.net/yRFSV/

Answer 2

你可能想要

<script type="text/javascript">
$(window).ready(function() {
    $('.glass').click(function() {
        $(this).children('.permalinks').slideToggle(function() {
        });
    });
});
</script>

Answer 3

如果.permalinks是 的孩子.glass，那么很容易：

    $(window).ready(function() {
        $('.glass').click(function() {
            $(this).find('.permalinks').slideToggle(function() {
            });
        });
    });

Answer 4

如果.permalinks是 的子项.glass，则您可以在单击时直接选择它。

$('.glass').on('click', function() {
  $(this).find('.permalinks').slideToggle();
});

Answer 5

两种选择：

1. .permalinks在.glassDOM 树中
   使用$(this).next('.permalinks').slideToggle(function() {

2. .permalinks是之前.glass在 DOM 树中
   使用$(this).prev('.permalinks').slideToggle(function() {