切換下一個元素只能在div內工作

我寫了一篇文章，並希望超鏈接腳註在內聯中切換其相應的引用。因此，例如：切換下一個元素只能在div內工作

的jQuery：

$(document).ready(function() { 
    $('.reference').hide(); 
    $('.footnote').click(function() { 
     $(this).next('.reference').toggle('slow'); 
     return false; 
    }); 
});

HTML：

<p> 
    Blah blah blah blah<a href='#' class='footnote'>[5]</a><span class='reference'>Doe, John. <em>The Book of Blah</em>. 2013.</span> 
</p>

，工作正常，但在某些情況下，格式化是一個問題，把參考範圍外段落標籤擰緊了整個操作。

<p> 
    Blah blah blah blah<a href='#' class='footnote'>[5]</a> 
</p> 
<span class='reference'>Doe, John. <em>The Book of Blah</em>. 2013.</span>

任何想法？

謝謝！

來源

2013-08-24 Hank

如果你想這是真正靈活的，你應該把腳註標籤內的腳註編號和參考標籤：

<p> 
    Blah blah blah blah<a href='#' data-footnote="5" class='footnote'>[5]</a> 
</p> 
<span class='reference' id='reference-5'>Doe, John. <em>The Book of Blah</em>. 2013.</span>

至於JavaScript的：

$(document).ready(function() { 
    $('.reference').hide(); 
    $('.footnote').click(function() { 
     $('#reference-' + this.getAttribute('data-footnote')).toggle('slow'); 
     return false; 
    }); 
});

來源

2013-08-24 00:58:37

http://api.jquery.com/next/

描述：立即獲取foll由於中的每個元素的同胞元素的集合。如果提供了選擇器，則只有在與該選擇器匹配時纔會檢索下一個兄弟對象。

這意味着你的代碼：$(this).next('.reference').toggle('slow');將只選擇緊跟this一個.reference元素。在你的例子.footnote。

在第二個示例中，情況並非如此，因爲.footnote是其父項中的最後一個元素。要使它工作，你必須做這樣的事情：

$(this).parent().next('.reference')

來源

2013-08-24 01:05:19 Andy

切換下一個元素只能在div內工作

回答

相關問題