隐藏了错误的盒子答案

【问题标题】：Wrong box being hidden隐藏了错误的盒子
【发布时间】：2011-05-17 03:22:45
【问题描述】：

我有一组链接，单击这些链接会显示一个隐藏的 div，其中包含与之相关的信息。单击每个链接时，都会显示一个与之关联的不同 div。我正在尝试在每个 div 上使用“countystats”类作为关闭按钮来隐藏 div 的图像（closelabel.png）。我还不能让每个 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

【问题讨论】：

为什么要使用 2 个脚本标签？
因为我是在没有任何脚本识别或缩进的文本编辑器中执行此操作的，所以我想确保我的大括号和分号是正确的。
顺便说一句，省去你的麻烦，使用适合编码的文本编辑器。无论操作系统如何，都有大量免费的优质程序可供选择。
你错过了$(document).ready(...)...

标签： javascript jquery html css

【解决方案1】：

您的问题是关于this 在此处的点击处理程序中的内容有点混乱：

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

您在 <a> 上调用 index，您用于隐藏 <div> 而不是 <div> 本身。

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

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

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案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);
});

【讨论】：