使用帶有id的兄弟h3標籤選擇帶標識的div中的p標籤

如果上面的標題有些複雜，請以簡單的英文寫這些東西通常比內部的問題更困難！使用帶有id的兄弟h3標籤選擇帶標識的div中的p標籤

我敢肯定這是一個相當基本的問題，但我有點與jQuery選擇器和層次結合，現在看不到樹木了......這是一個課堂練習，所以我是堅持使用HTML代碼。

我試圖通過雙擊H3標題來隱藏/顯示H3標題下的段落。

<div class="chapter" id="chapter-preface"> 
    <h3 class="chapter-title">Preface</h3> 
    <p>Blah, blah, blah, blah, blah</p> 
    <p>Blah, blah, blah, blah</p> 
    <p>Blah, blah, blah</p> 
    <p>Blah</p> 
</div> 
<div class="chapter" id="chapter-1"> 
    <h3 class="chapter-title">Chapter 1</h3> 
    <p>Rhubarb, rhubarb, rhubarb, rhubarb, rhubarb, rhubarb</p> 
    <p>Rhubarb, rhubarb, rhubarb</p> 
</div>

我已經走了這麼遠是下面的jQuery代碼最接近：

$('.chapter-title').dblclick(function() { 
    $('div p').toggleClass('hidden'); 
});

但可能是相當明顯的這隻藏有兩下的div的所有p標籤的作用。我希望它能隱藏在雙擊的相關H3標題下的p標籤。我試過使用'this'，但顯然不正確，因爲它沒有達到預期效果。

我想我需要以某種方式選擇單擊的H3標記的父母div和與它關聯的唯一ID，然後將隱藏/顯示事件應用於....任何建議？

乾杯！

來源

2012-02-13 Dan Solo

嗯......大黃。 – BoltClock 2012-02-13 11:10:09

您可以簡單地使用.nextAll()或.siblings()挑選所有p元以下，在父divh3，實際上並沒有選擇父div：

$('.chapter-title').dblclick(function() { 
    $(this).nextAll('p').toggleClass('hidden'); 
});

來源

2012-02-13 11:10:59 BoltClock

我*會*選擇父'div'並將其賦予類，然後將隱藏的樣式應用於'div.chapter.hidden p'，作爲一種更乾淨的解決方案。 – BoltClock 2012-02-13 11:14:14

太好了，謝謝 - 我知道這會讓人感到尷尬的簡單。 – 2012-02-13 12:10:36

您可以使用.nextAll或.siblings：

$('.chapter-title').dblclick(function() { 
    $(this).nextAll("p").toggleClass('hidden'); 
});

或者：

$('.chapter-title').dblclick(function() { 
    $(this).siblings("p").toggleClass('hidden'); 
});

來源

2012-02-13 11:11:06 karim79

試試這個：

$('.chapter-title').dblclick(function() { 
    $(this).siblings('p').toggleClass('hidden'); 
});

來源

2012-02-13 11:11:13

使用nextAll('p')將得到所有在與匹配選擇當前的元素。 toggle()將根據需要隱藏/顯示它們，並保存班級的使用。

試試這個：

$('.chapter-title').dblclick(function() { 
    $(this).nextAll('p').toggle(); 
});

Example fiddle

來源

2012-02-13 11:12:09

+1：提供一個工作示例 – 2012-02-13 11:19:58

爲什麼不乾脆用的toggle()代替toggleClass（ '隱藏'）和你的情況，你卻只有你的DIV中para元素，所以你可以再次簡單地寫siblings()。但如果你有其他元素，然後兄弟姐妹（'p'）是一種方式去。

下面是代碼

$('.chapter-title').dblclick(function() { 
$(this).siblings().toggle(); 
});

只是，如果你需要了解更多：

工作 ---當任何標題的點擊該修改CSS屬性display:inline到display:hidden當標題再次點擊此CSS屬性更改回display:inline。是啊！它恢復它。

來源

2012-02-14 12:49:07 kushalvm

使用帶有id的兄弟h3標籤選擇帶標識的div中的p標籤

回答

相關問題