javascript - 隐藏了错误的框

我有一系列的链接，当单击它们时将显示一个隐藏的div及其相关信息。单击每个链接时，将显示一个与之关联的不同的div。我正在尝试使用class'countystats'在每个div上创建图像（closelabel.png），作为关闭div的隐藏按钮。我还无法获得每个div中的图像作为可点击链接。更重要的是，当我单击链接时，没有任何反应。当我打开两个隐藏的div并尝试关闭一个div时，相对的一个div会关闭（如果我单击“一个”和“两个”以使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

最佳答案

您的问题对点击处理程序中的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);
});

没有人注意到您问题的真正根源是什么，所以我想我提到了它。

关于javascript - 隐藏了错误的框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5516547/