2017-06-05 452 views
1

我想建立一个jQuery的时候点击div #toggle,span内div会显示,当设置为切换模式,但是当我使用两个或多个div块时,它只显示第一个跨度。请帮忙。jQuery的点击,切换一个或多个div块

$(document).ready(function() { 
 
    $("div#toggle").click(function() { 
 
    $("#show").toggle(); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='toggle'>this clicked 
 
    <span id='show'><p>Show this</p></span> 
 
</div> 
 
<div id='toggle'> 
 
    <span id='show'><p>fhslkjklsfjl</p></span> 
 
</div>

+4

使用类作为ID应该是唯一的! –

+1

投票结束,因为_这个问题是由于无法再现的问题或简单的印刷错误造成的。虽然类似的问题可能在这里讨论,但这个问题的解决方式不太可能有助于未来的读者。这通常可以通过识别并密切检查发布之前重现问题所需的最短程序来避免._ – mplungjan

+1

或更好:https://stackoverflow.com/questions/8498579/how-jquery-works-when-there-与多个元素一起使用的ID在 – mplungjan

回答

0

试试这个: -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <div id='toggle'>this clicked 
     <span id='show'><p>Show this</p></span> 
    </div> 
    <div id='toggle'>2 nd button 
     <span id='show'><p>fhslkjklsfjl</p></span> 
    </div> 

     $("div#toggle").click(function(e) { 
    if (e.target !== this) 
    return; 
    $(this).find("#show").toggle(); 
    }); 

https://jsfiddle.net/9oh6yqfn/9/

+1

中应始终是唯一的HTML。如果你想跨DOM元素使用相同的名字,你应该使用类。 –

-1

你不能有相同的ID两个跨度。尝试使用不同的身份证的跨度。 对于如:

$(document).ready(function() { 
 
    $("div#toggle").click(function() { 
 
    $("#show").toggle(); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='toggle'>this clicked 
 
    <span id='show'><p>Show this</p></span> 
 
</div> 
 
<div id='toggle'> 
 
    <span id='show1'><p>fhslkjklsfjl</p></span> 
 
</div>

0

不能使用相同的ID。 ID应该是唯一的

尝试通过给类:

$(".toggle").click(function(e) { 
 
    if (e.target !== this) 
 
    return; 
 
    $(this).find("#show").toggle(); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='toggle'>this clicked 
 
    <span id='show'><p>Show this</p></span> 
 
</div> 
 
<div class='toggle'>2 nd button 
 
    <span id='show'><p>fhslkjklsfjl</p></span> 
 
</div>