jquery父母（）幫助

有人可以告訴我爲什麼這不起作用嗎？我試圖展示和隱藏內容。jquery父母（）幫助

這裏是我的標記

<div class="entry"> 
    <p class="posted"> 
    test<br /> 
    <a href="#" class="toggle" title="Show Comments"> 
     Show/Hide 
    </a> 
    </p> 
    <div class="box" class="comment"> 
    test hidden comment 
    </div> 
</div>

$(function() { 
    $('div.box').hide(); 
    $('a.toggle').click(function() { 
    $(this).parents('.entry').next('div.box').toggle(400); 
    }); 
});

這個例子坐鎮現在，如果我參加了最後收DIV和結束p標記後，移動它時，它工作正常，但方式顯示和隱藏所有隱藏的內容（divs）這不是我所追求的。我只想顯示與每個鏈接關聯的內容。

來源

2009-10-25 Jack

你註冊了兩次問相同的問題嗎？ http://stackoverflow.com/questions/1620149/is-there-a-way-to-make-this-jquery-script-dynamic – Mottie 2009-10-26 10:06:53

嘗試使用.parent而不是.parents。

這將工作：

$(function() { 
     $('div.box').hide(); 
     $('a.toggle').click(function() { 
     $(this).parent('.posted').next('div.box').toggle(400); 
     }); 
    });

來源

2009-10-25 08:43:27

謝謝Q8，我只是試過了，它不起作用。 :( – Jack 2009-10-25 08:46:12

元素'div.box'不是兄弟'div.entry'，它應該是'p.posted' – 2009-10-25 08:51:08

嗨Q8，是的，這是行得通的。謝謝！我還有一個小問題，我不知道爲什麼......但是當我點擊測試鏈接時，瀏覽器會打開隱藏的內容，同時推動/滾動內容。與用戶單擊常用「頂部」鏈接返回頁面頂部時的行爲相同。你知道爲什麼嗎？ – Jack 2009-10-25 08:54:19

class="comment" overrides class="box", use class="comment box"

來源

2009-10-25 08:51:56 parkim

嗨帕克，你是指我遇到的問題，頁面跳到頂部？我試過這個，但它仍然做同樣的事情。 – Jack 2009-10-25 09:03:19

這不是parents這就是問題所在，它的next()。 next()提取同胞元素，而你需要嵌套的子元素。改爲使用children()。試試這個，它的工作對我來說：

$(function() { 
    $('div.box').hide(); 
    $('a.toggle').click(function() { 
    $(this).parents('.entry').find('div.box').toggle(400); 
    }); 
});

這是因爲next()獲取對象的兄弟姐妹，而find()搜索後裔：

$(function() { 
    $('div.box').hide(); 
    $('a.toggle').click(function() { 
    $(this).parents('.entry').children('div.box').toggle(400); 
    }); 
});

來源

2009-10-25 08:52:01 zombat

謝謝Zombat。我做了改變，你的解決方案也可以工作。我還有一個問題，點擊鏈接打開和關閉該框時，頁面跳轉到頂部。你知道這是爲什麼嗎？ – Jack 2009-10-25 09:05:52

嗨，傑克，是的，這是因爲你的鏈接的'href'等於'＃'。這是一個命名錨點的語法，如果'＃'後面沒有名字，瀏覽器就會進入頁面的頂部。改變你的鏈接到'href =「javascript：void（0）」'並且它不會那樣做。 – zombat 2009-10-25 18:48:12

，如果你改變next()到find()或children()工作。當你的代碼調用next()對象是'.entry'，它沒有兄弟姐妹，你可以使用children()作爲zombat暗示或find()，因爲我已經做了div.box，因爲它是'.entry'的後裔。

來源

2009-10-25 08:57:32 beggs

謝謝貝格斯。我可以問......它究竟做了什麼？我的意思是，父母的標籤..它的功能是什麼，當它發現元素時，我如何訪問它們？ – Jack 2009-10-25 09:04:47

什麼是ID： '$（'a.toggle'）。click（...'：這意味着添加一個「onClick（）」方法到類型'a'的所有元素'toggle' 'function ）{$（this）.parents（'。entry'）。find（'div.box'）。toggle（400）;}'：分配給click事件的匿名函數，說「帶點擊元素並查找所有祖先（'父母（）'）帶着任何具有'.entry'類的祖先，並找到它的任何一個類型爲'div'和類'box'的後代，並且在該元素上調用'toggle（）' 如果你使用'next（）'這個函數將放在'.entry1的一個* sibling *上，這個元素與DOM樹的同一級別。 – beggs 2009-10-26 03:24:04

Parkim嗨，你指的是我與頁面跳起來頂端具有問題？我試過這個，但它仍然做同樣的事情。 - 插孔

nope，由於覆蓋，您不能使用「.box」選擇器。你的頁面跳轉到頂端，因爲「＃」錨點，你應該使用「return false」來防止默認的「點擊」處理程序。

$("a").click(function() { /* your code */ return false; });

來源

2009-10-25 09:17:35

只是作爲一個替代方案，我會分別使用closest和find代替parent和children，我認爲這是偏好的更多的事情雖然。

$(function() { 
    $('div.box').hide(); 
    $('a.toggle').click(function() { 
    $(this).closest('.entry').find('div.box').toggle(400); 
    return false; 
    }); 
});

來源

2009-10-26 08:14:08 Mottie

jquery父母（）幫助

回答

相關問題