-2

我知道有很多这样的线程，但似乎没有一个真正适合我。

我有 5 次潜水，上面写着“这是 div1，到 div5”。这些总是会被展示出来的。我有 5 个隐藏的 div，每个 div 都有文本，如果我点击我显示的 div，它们就会显示出来。

如果我单击 div1，我想显示隐藏的 div1。

现在我正在为每个 div 使用一个 click 函数（jQuery），它可以工作但在代码中看起来不是很好。一定有更好的方法。有什么建议吗？

我不希望任何 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();   

})
4

3 回答 3

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
缺点：不要将其他元素放在父元素中，否则您可能会弄乱索引计数

使用或其他 jQuery 遍历方法的目标元素.next() 

<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；不灵活且难以维护的代码。

于 2013-08-22T16:51:41.010 回答
0 
$('div').click(function() {
    var text = $(this).text();
    $('#'+text).show();
});

小提琴演示

于 2013-08-22T16:57:00.070 回答
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每个数据隐藏属性中的权利。

工作演示

于 2013-08-22T17:24:54.873 回答