錯誤的框被隱藏

我有一個鏈接數組，當點擊時會彈出一個隱藏的div與信息相關。每個鏈接點擊後，都會顯示與其關聯的不同div。我試圖在每個div上使用類'countystats'作爲關閉按鈕來隱藏div的圖像（closelabel.png）。我無法將每個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

來源

2011-04-01 dzilla

你爲什麼使用2個腳本標籤？ – 2011-04-01 17:13:04

因爲我是在沒有任何腳本識別或縮進的文本編輯器中完成這項工作的，所以我想確保我的支架和分號正確。 – dzilla 2011-04-01 17:14:32

順便說一句，節省您的頭痛，並使用適合編碼的文本編輯器。無論操作系統如何，都有許多優秀的免費程序供您選擇。 – 2011-04-01 17:23:54

你的問題是什麼this是在單擊處理在這裏有點混亂：

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

您在上打電話你用來隱藏<div>而不是<div>本身。

最簡單的辦法是，其他人都注意到，使用closest：

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

沒有人注意到你的問題的真正根源是，所以我想我會提到它。

來源

2011-04-01 17:28:30

謝謝，這些小東西對我們有很大的幫助！ – dzilla 2011-04-01 17:30:09

你是試着g不正確地綁定事件處理程序（爲了您想要的代碼執行的操作）。此外，只需使用.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/

來源

2011-04-01 17:16:46

+1個獨角獸！好吧！ – hunter 2011-04-01 17:21:44

光滑！非常感謝。 – dzilla 2011-04-01 17:22:07

只需使用父（）：

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

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

來源

2011-04-01 17:23:34

錯誤的框被隱藏

回答

相關問題