Question

我有一系列链接，点击后会显示一个隐藏的div，其中包含与之相关的信息。单击时，每个链接将显示与其关联的不同div。我正在尝试在每个div上制作一个图像（closelabel.png），并使用“countystats”类作为隐藏div的关闭按钮。我无法将每个div中的图像作为可点击链接。更重要的是，当我点击链接时，没有任何事情发生。当我打开两个隐藏的div并尝试关闭一个时，相反的一个关闭（如果我点击'one'和'two'使div出现，然后我舔'a'（为了关闭的目的）链接）相反的div关闭。所以两个按钮关闭一个。

<style type="text/css">
.county{
    color:blue;
    display:block;

}
.countystats{
    background-image:url('../../../../../closelabel.png') ;
    background-position:top right;
    border:3px black inset;
    background-repeat:no-repeat;
    background-color:#ccc;
    display:none;
    right:250px;
    margin: 5px 5px 5px 5px;
    padding:5px 5px 5px 5px;
    width:200px;

}
</style>

<div style="height:250px;bottom:300px; width:100px; padding: 1em; overflow:auto; margin:5px 5px 5px 5px; border: 2px black;  overflow-x:hidden;">
    <a class="county" href="#">one</a>
    <a class="county" href="#">two</a>
    <a class="county" href="#">three</a>
    <a class="county" href="#">four </a>
    <a class="county" href="#">five</a>
    <a class="county" href="#">six</a>
</div>
<div class="countystats">stats one<p>woot</p><a  class="closediv" href="#">a</a></div>
<div class="countystats">stats two <a class="closediv"  href="#">a</a></div>

<div class="countystats">stats three</div>
<div class="countystats">some other stuff</div>
<div class="countystats">even more other stuff</div>

<script type="text/javascript">
    $('a.county').each( function(e){
        $(this).bind('click', function(e){
            var thisIs = $(this).index(); $('.countystats').eq(thisIs).show (250); 
        });
    });

    $('a.closediv').each( function(e){
        $(this).bind('click', function(e){
            var toClose = $(this).index(); $('.countystats').eq(toClose).hide(250); 
        });
    });
</script>

jsfiddle demo

Answer 1

您的问题对于此处点击处理程序中this的内容有点混淆：

$('a.closediv').each( function(e){
    $(this).bind('click', function(e){
        var toClose = $(this).index();
        $('.countystats').eq(toClose).hide(250); 
    });
});

您正在使用index上的<a>来隐藏<div>而不是<div>本身。

正如其他人所指出的，最简单的解决方案是使用closest：

$('a.closediv').click(function(e) {
    $(this).closest('.countystats').hide(250);
});

没有人注意到你问题的根源是什么，所以我想我会提到它。

Answer 2

您正在尝试错误地绑定事件处理程序（对于您希望代码执行的操作）。另外，只需使用.closest()找出要隐藏的元素。

$('a.county').click(function(e) {
    var thisIs = $(this).index();
    $('.countystats').eq(thisIs).show(250);
});

$('a.closediv').click(function(e) {
    $(this).closest('.countystats').hide(250);
});

http://jsfiddle.net/mattball/tbNvn/4/

Answer 3

只需使用parent（）：

$('a.county').click(function(e) {
    var thisIs = $(this).index();
    $('.countystats').eq(thisIs).show(250);
});

$('a.closediv').click(function(e) {
    $(this).parent().hide(250);
});

错误的盒子被隐藏了

3 个答案: