我知道有很多这些线程,但似乎没有一个真正适合我。
我有5次潜水,文字如“这是div1,div5”。这些始终将会显示出来。 我有5个隐藏的div,文本属于每个div,如果我点击我显示的div,将会显示。
如果我点击div1,我想显示隐藏的div1。
现在我正在为每个div工作使用点击功能(jQuery),但是代码看起来不太好。一定有更好的方法。有什么建议吗?
我 NOT 希望任何div都是超链接,这似乎是这里许多类似线程的解决方案。
编辑:这是我目前的代码。(无法让jsfiddle工作)
HTML
<div class="showing_div">
<p>This is a showing div</p>
</div>
<div class="hidden_div" style="display: none;>
<p>This div is hidden</p>
</div>
Jquery的
$('showing_div').click(function() {
$('hidden_div').toggle();
})
答案 0 :(得分:2)
这是最常用的技术:
.index()
和.eq()
<div id="clickables">
<div>CLICK 1</div>
<div>CLICK 2</div>
</div>
<div id="togglables">
<div>text 1</div>
<div>text 2</div>
</div>
$(function(){
$("#clickables div").click(function(){
var idx = $(this).index();
$('#togglables div').eq( idx ).slideToggle();
});
});
<子> 优点:您可以保持非常干净的HTML标记,无需分配其他类或ID 缺点:不要将其他元素放在父元素中,否则可能会使索引计数混乱
.next()
或其他jQuery遍历方法的目标元素 <div id="menu">
<div class="clickable">CLICK 1</div>
<div>text 1</div>
<div class="clickable">CLICK 2</div>
<div>text 2</div>
</div>
$(function(){
$("#menu .clickable").click(function(){
$(this).next('div').slideToggle();
});
});
ID
<div class="clickable" id="_1" > CLICK 1 </div>
<div class="clickable" id="_2" > CLICK 2 </div>
<div id="togglable_1"> text 1 </div>
<div id="togglable_2"> text 2 </div>
$(function(){
$(".clickable").click(function(){
$("#togglable"+ this.id).slideToggle();
});
});
<子> 优点:您可以定位DOM中未经逻辑定位的元素 缺点:详细HTML;不灵活且难以维护的代码。
答案 1 :(得分:0)
$('div').click(function() {
var text = $(this).text();
$('#'+text).show();
});
<强> FIDDLE DEMO
答案 2 :(得分:0)
正如@Roko C. Buljan所说,有很多方法可以做到这一点。
这就是我通常使用 .data() jQuery函数的方式:
<div class="clickable" data-hidden="d1">CLICK 1</div>
<div id="d1" class="hidden">text 1</div>
<div class="clickable" data-hidden="d2">CLICK 2</div>
<div id="d2" class="hidden">text 2</div>
$(".clickable").click(function() {
$("#" + $(this).data("hidden")).toggle();
});
这样,我如何组织我的DOM元素并不重要。我只需要在每个数据隐藏属性中识别正确的id
。
<强> Working demo