點擊特定的div時顯示特定的內容JS/jQuery

-1

我有一個常見問題頁面，我試圖獲得一個特定的答案，以顯示某個問題被點擊時。點擊特定的div時顯示特定的內容JS/jQuery

下面是代碼：

HTML：

<div class="questions"> 
    <div>First Question</div> 
    <p>Answer to first questions</p> 
    <div>Second Question</div> 
    <p>Answer to second Question</p> 
    <div>Third Question</div> 
    <p>Answer to third question</p> 
</div>

CSS：

.questions div{ 
    cursor:pointer; 
    margin:10px 0; 
} 

p{ 
    display:none; 
    background-color:#f4f4f4; 
    padding:10px; 
}

我想p來根據顯示正確的div問題被點擊。任何幫助？由於

來源

2014-08-27 Chipe

看所有的高聲望用戶排隊編寫代碼是免費的。驚人。 – 2014-08-27 16:29:26

這是一件壞事嗎？ – Chipe 2014-08-27 16:34:56

是的。該網站的目的是建立一個對程序員來說很有用的問題和答案庫;這不僅僅是專門幫助你。你在這裏有什麼問題？沒有一個。什麼是要解決的問題？問題是「我沒有代碼」。如何解決這個問題將幫助任何人**其他**？它幫助你，很棒，但這不是網站的目的。查看http://stackoverflow.com/help/how-to-ask。你在這裏得到了答案，但它最終是混亂的，因爲問題和答案通常不是有用的。 – 2014-08-27 16:41:37

使用此代碼：

$(".questions div").on('click', function() { 
    $(".questions p").hide(); 
    $(this).next().show(); 
});

這將顯示被點擊的div的下一個元素，你要知道，如果有將是另一種元素，那麼就會有不同登錄（例如使用類，或者使用.next('p')來確保您僅選擇p元素）。

小提琴更新和工作：http://jsfiddle.net/hdr6shy9/8/

來源

2014-08-27 16:27:16

真棒，謝謝！如果點擊另一個問題，我該如何隱藏它？ – Chipe 2014-08-27 16:32:31

你可以在show line之前使用'$（「。questions p」）。hide（）'。我現在更新 – 2014-08-27 16:35:27

@Chipe只是更新的代碼和小提琴。 – 2014-08-27 16:36:21

您可以使用jQuery爲：

$(".questions div").click(function() { 
    $(this).next().show(); 
});

http://jsfiddle.net/hdr6shy9/5/

來源

2014-08-27 16:28:10 ltalhouarne

這裏是在實現這一目標的一個可能的方式小提琴：

$('.question').click(function() { 
    $(this).next('p').show(); 
});

http://jsfiddle.net/d0qhm4xv/1/

來源

2014-08-27 16:28:43

我會建議你添加一個id屬性問題div和答案p，爲什麼？也許將來你需要重構你的FAQ頁面，這很容易維護。

<div class="questions"> 
    <div id="1">First Question</div> 
    <p id="a1">Answer to first questions</p> 
    <div id="2">Second Question</div> 
    <p id="a2">Answer to second Question</p> 
    <div id="3">Third Question</div> 
    <p id="a3">Answer to third question</p> 
</div> 

$('.questions div').click(function(){   
    var qid = $(this).attr('id'); 
    $('#a'+qid).show(); 
});

如果將來你改變你的HTML這樣的：

<div class="questions"> 
    <div id="1">First Question</div> 
    <div id="2">Second Question</div> 
    <div id="3">Third Question</div> 
</div> 
<div class="answers"> 
    <p id="a1">Answer to first questions</p> 
    <p id="a2">Answer to second Question</p> 
    <p id="a3">Answer to third question</p> 
</div>

同一個JavaScript代碼將工作。

否則，@ lolkidoki解決方案就是您所需要的。

來源

2014-08-27 16:48:16 rogelio

差不太多，這裏有一個辦法：

$('.question').click(function() { 
    $(this).next('p').show(); 
});

來源

2014-08-28 01:57:10

點擊特定的div時顯示特定的內容JS/jQuery

回答

相關問題