隐藏并显示带文本的div

时间:2013-08-22 16:45:21

标签: javascript jquery

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

我有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();   

})

3 个答案:

答案 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