2017-06-05 59 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>