對同一頁面上的多個元素使用Jquery Hide＆Show

嗨我試圖創建一個使用隱藏和顯示函數多次隱藏不同文本塊的頁面。我遵循w3schools上的教程，並編輯代碼嘗試使其工作。然而，我越來越和錯誤，即隱藏和顯示功能只適用於第一段文本，而不是其他文本。這裏是我的代碼對同一頁面上的多個元素使用Jquery Hide＆Show

<script type="text/javascript" src="/javascript/jquery-1.6.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#hide").click(function(){ 
    $("p").hide(); 
    }); 
$("#show").click(function(){ 
    $("p").show(); 
    }); 
}); 
</script> 
<div class="questions" id="question-1"> 
    <h1>Question</h1> 
</div> 
<p> 
    answer</p> 
<div id="hide"> 
    Hide</div> 
<div id="show"> 
    Show</div> 
<div class="questions" id="question-2"> 

     <h1>Question</h1> 
</div> 
<p> 
    Answer</p> 
<div id="hide"> 
    Hide</div> 
<div id="show"> 
    Show</div>

有沒有人知道爲什麼會發生這種情況？

來源

2012-03-15 akira6790

如果有幫助，請不要忘記接受答案。 – 2012-03-17 21:06:36

因爲您使用的是id而不是類。 id在HTML頁面中允許存在一次。

好吧，你的意見，你可以用這樣一個屬性關聯起來：

<p rel='answer_1'>Answer</p> 
<div class="hide" answer='1'>Hide</div> 
<div class="show" answer='1'>Show</div>

，然後在你的腳本：

$(".hide").click(function(){ 
    $("p[rel='answer_" + $(this).attr("answer") + "']").hide(); 
}); 

$(".show").click(function(){ 
    $("p[rel='answer_" + $(this).attr("answer") + "']").show(); 
});

來源

2012-03-15 22:32:20

嗨，感謝您的回覆，確實有幫助。我有另一個問題。隱藏和顯示功能適用於每個問題，但是當您單擊隱藏或顯示隱藏每個答案時。我希望能夠單獨隱藏答案。 – akira6790 2012-03-17 20:58:45

嗨，再次感謝您的回覆。我在我的網站上測試了這個代碼，當點擊任何東西時，它似乎不起作用 – akira6790 2012-03-18 12:00:59

但它的工作。你可以在這裏測試它：http://jsfiddle.net/tWJ4C/ – 2012-03-18 13:45:57

永遠不要使用相同的ID多個元素。我已經通過增加或增加了一兩個代碼來創建應該工作的東西。我已經爲顯示/隱藏鏈接引入了data屬性，其值由相關答案共享。現在，您可以在單擊show或hide時獲得data-id屬性的值，然後從值中生成您的jQuery選擇器。你可以做更多的事情來幹這件事，但這是向正確方向邁出的第一步。

<script type="text/javascript" src="/javascript/jquery-1.6.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".hide").click(function(){ 
    var id = $(this).attr('data-id'); 
    $("p." + id).hide(); 
    }); 
$(".show").click(function(){ 
    var id = $(this).attr('data-id'); 
    $("p." + id).show(); 
    }); 
}); 
</script> 

<div class="questions" id="question-1"> 
<h1>Question</h1> 
</div> 

<p data-id='answer-a'>answer</p> 
<div class="hide" data-id='answer-a'>Hide</div> 
<div class="show" data-id='answer-a'>Show</div>

來源

2012-03-15 22:43:04 osahyoun

對同一頁面上的多個元素使用Jquery Hide＆Show

回答

相關問題