不想重複我自己
回答
如果你給你的div你試圖顯示一個ID和鏈接你點擊相同的類和div ID的href(這使得它更容易訪問),你可以這樣做:
HTML
<a class="show" href="#zerotwo">link1</a>
<div id="zerotwo">
<h1>Link heading <span>[close x]</span></h1>
<p>blah</p>
</div>
<a class="show" href="#zerothree">link2</a>
<div id="zerothree">
<h1>Link heading <span>[close x]</span></h1>
<p>blah</p>
</div>
JS
$('.show').click(function() {
var showDiv = $($(this).attr('href'));
showDiv.show();
showDiv.find('h1 span').click(function() {
showDiv.hide();
});
});
相同的類別意味着它也會打開下一個彈出框 – 2013-02-27 11:23:38
這就是id和href進來的地方 - 查看小提琴它只打開目標div – Pete 2013-02-27 11:24:49
當我點擊鏈接1彈出窗口打開,然後當我再次單擊鏈接2彈出窗口打開並這不應該發生。 – 2013-02-27 11:27:54
您可以通過多種方式清理此問題 此處我只使用一個彈出窗格,並在每次點擊時設置其內容。
http://jsbin.com/ovomaw/2/edit
,或者您可以使用某種模板庫的HTML添加到文檔中的每個彈出(這將讓你有多個彈出窗口可見一次)。
正確的解決方案是很難確定沒有更多地瞭解您的數據是從等
你需要通過類,你想從某種程度上鍊接顯示的div來了,這是data-
的一種方式屬性。如果頁面上只有一個div,它應該是一個id。
我已將您的鏈接更改爲具有相同的類'show'(可以命名爲更好),彈出按鈕我給了一類closepopup
,並且您的彈出窗口中有一類popup
單擊關閉一個會隱藏顯示所有彈出窗口(這可能不是期望的行爲)
的Html
<body>
<a class="show" data-popupid="zerotwo" href="#">link1</a>
<a class="show" data-popupid="zerothree" href="#">link2</a>
<div id="zerotwo" class="popup">
<h1>Link heading <span class='closepopup'>[close x]</span></h1>
<p>dhakshdakdhkhdahdlldhalksh</p>
</div>
<div id="zerothree" class="popup">
<h1>Project completion report submission <span class='closepopup'>[close x]</span></h1>
<p>dhakshdakdhkhdahdlldhalksh</p>
</div>
</body>
的js
$(document).ready(function() {
$('.show').click(function() {
var popupClass = $(this).data('popupid');
$('div#' + popupClass).show();
});
$('.closepopup').click(function() {
$('div.popup').hide();
});
});
你湊ld通過在頁面上有一個div
來製作這個整理器,並從任何一個鏈接被點擊的地方控制內容或彈出類型,然後在JS中動態添加彈出窗口的內容。
根據您的要求,此解決方案有很多。
我測試了你的代碼,但問題是相同的類意味着它將打開下一個彈出窗口,這不應該發生。 – 2013-02-27 11:22:46
不,它只打開你想要的div,它使用id打開,關閉類。 – 2013-02-27 12:30:58
- 1. PHP - 不要重複自己?
- 2. Dojo - 不要重複自己
- 3. 模型驗證。不想重複自己。 Django
- 4. xmlhttprequest重複自己
- 5. Math.random重複自己
- 6. Footer自己重複
- 7. CABasicAnimation重複自己
- 8. System.out.println重複自己
- 9. 我的cookie不想刪除自己
- 10. Mysql如何避免重複我自己
- 11. 我如何重複使用摩卡測試,所以我不必重複自己?
- 12. PHP不重複代碼(不要重複自己)
- 13. 不要重複自己在Capistrano的3
- 14. 不要重複自己 - XAML和WPF
- 15. Javascript/jquery - 不要重複自己
- 16. 使用棉花糖不重複自己
- 17. 分頁類DLL - 不要重複自己
- 18. 不要重複自己在遞歸
- 19. 試圖不重複自己(android/java)
- 20. 如何不重複自己(DRY)
- 21. 不要重複自己VS國際
- 22. jsf表重複自己
- 23. 對象重複自己
- 24. PHP Foreach重複自己
- 25. 當我執行bash時,$ PATH不斷重複自己
- 26. 不重複我自己,與對象的智能循環
- 27. 使用私人nunit測試不要重複我自己
- 28. 想給我自己的範圍
- 29. 我想用自己的REST API
- 30. 我想要實現的SharePoint,但我想設計自己的路
請包括您的問題代碼,不要只鏈接到包含它的外部頁面。 – PhonicUK 2013-02-27 10:52:13