顯示/隱藏單獨通過while循環生成的DIV元素

Question

我一直在審查以前的論壇，並且我意識到類似的問題，但是我沒有找到我確切需要的東西。簡而言之，我有一個while循環，while循環根據特定表中存在的記錄數量生成隱藏/顯示div元素。我想要完成的是讓用戶能夠單獨訪問每個div。

這裏是正在使用的腳本文件：

<script type="text/javascript"> 
function show() 
{ 

    var x=document.getElementById('woupdate7'); 
    if(x.style.display==='none') 
    { 
     x.style.display='block'; 
    } 
    else 
    { 
     x.style.display='none'; 
    } 

} 
</script> 

那麼php代碼如下：

$woeditquery="SELECT * FROM 3pxwotc_tb where woid='$worderindex' and 
wosct<>''"; 
$woeditresult=mysqli_query($con6,$woeditquery); 
while($woeditrecord2=mysqli_fetch_array($woeditresult)) 
{ 
echo "<div id='woupdate6'>"; 
echo"<label><img src='images/darrow.png' style='padding-left:3px;padding- 
top:3px; width: 20px; height: 20px; margin:0' 
onclick='show()'>Details:</label>"; 
echo"</div>"; 
//=================================================================== 

echo"<div id='woupdate7' style='display:none'>"; 
echo"<br><textarea name='reason' id='adres' rows='3' 
cols='135'placeholder='Enter Details'></textarea><br>"; 
echo"</div>"; 
} 

上面的代碼將僅示出第一隱藏/顯示div元素，這是正確的因爲我只用相同的ID名稱指定相同的div /元素。

我改變Java代碼如下替換ID到CLASS：

function show() 
{ 

    var x=document.getElementsByClassName("woupdate7"); 
    n = x.length; 
    for (var i = 0; i < n; i++) 
    { 
    var e = x[i]; 
     if(e.style.display==='none') 
    { 
     e.style.display='block'; 
    } 
    else 
    { 
     e.style.display='none'; 
    } 

} 
</script> 

，然後在我的PHP的代碼變更爲的.class。此代碼同時顯示/隱藏元素，這不是我想要的。

有人能教我如何在一組內實現個別顯示/隱藏元素？我會很感激。

我知道它需要什麼，我需要索引每一個隱藏/顯示元素，問題是我不知道它是如何實現的。

謝謝你一如既往。

Answer 1

不知道這是你需要什麼，但反正...這個切換各個項目的

[].slice.call(document.querySelectorAll('.toggleDetails')).forEach(function(e){e.onclick = function(){ 
 
\t this.parentElement.querySelector('.details').classList.toggle('hidden') 
 
}})

.item{ 
 
    margin:5px; 
 
    border:1px solid #efefef; 
 
    padding:5px; 
 
} 
 
.hidden{ 
 
    display:none; 
 
}

<div class="item"> 
 
    <div class="title">Item 1</div> 
 
    <div class="details hidden"> 
 
    Edit Details 
 
    <input name="details" /> 
 
    </div> 
 
    <span class="toggleDetails">Details</span> 
 
</div> 
 
<div class="item"> 
 
    <div class="title">Item 2</div> 
 
    <div class="details hidden"> 
 
    Edit Details 
 
    <input name="details" /> 
 
    </div> 
 
    <span class="toggleDetails">Details</span> 
 
</div>

Answer 2

您可以在同一個計數器變量添加索引的細節循環。補充一點：

"<div id='woupdate". $counter ."'>"

，並在循環結束時，計數器增加：

$counter++;

如果相反的打印結果在同一個循環中，您將字符串存儲在一個變量稍後打印它，您可以使用相同的循環來構建菜單或選擇稍後在te div中導航。使用串連存儲字符串，如：

$output .= "<div id='woupdate". $counter ."'>";

，並建立了選擇，是這樣的：

$select .= "<a href='#woupdate". $counter ."'>"woupdate". $counter ."</a>";

然後你就可以在自己的位置打印這些varaibles。還記得前一陣來定義變量：

$counter = 0; $select = ""; $output = "";

這僅僅是一個辦法做到這一點，取決於你想要如何通過它可以改變的div來導航。

更新：

使用鏈接和IDS像前面例子中你不需要使用JavaScript來隱藏/顯示div的，你可以用這樣的CSS做到這一點：

nav { 
 
    width: 100%; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
} 
 

 
nav a:after { 
 
    content:' | '; 
 
} 
 

 
.container div { 
 
    display: none; 
 
} 
 

 
div:target { 
 
    display: block; 
 
}

<nav> 
 
    <a href="#woupdate1">woupdate1</a> 
 
    <a href="#woupdate2">woupdate2</a> 
 
    <a href="#woupdate3">woupdate3</a> 
 
</nav> 
 

 
<div class="container"> 
 
<div id="woupdate1"> 
 
<h1>woupdate1</h1> 
 
Bacon ipsum dolor amet hamburger flank turducken, drumstick andouille short loin meatball picanha pork chop capicola sirloin ham hock pork loin bacon porchetta. Rump meatball bresaola pork belly sausage tongue. Biltong spare ribs pork chop, sausage ball tip tenderloin cow hamburger pork shoulder chuck. Ham hock spare ribs tongue drumstick andouille cow rump meatball, corned beef turducken flank prosciutto jerky. Leberkas salami strip steak shoulder. 
 
</div> 
 

 
<div id="woupdate2"> 
 
<h1>woupdate2</h1> 
 
Drumstick boudin ham tri-tip kielbasa ground round pancetta alcatra ham hock short loin landjaeger. Tongue ground round salami jerky biltong pork andouille ribeye flank sausage doner. Shoulder hamburger sirloin drumstick kielbasa salami sausage pork. Shank pastrami salami pork loin tenderloin kielbasa filet mignon t-bone prosciutto cupim bacon ground round. Doner meatball swine capicola leberkas porchetta pork pig jerky turducken tail. 
 
</div> 
 

 
<div id="woupdate3"> 
 
<h1>woupdate3</h1> 
 
Tongue jowl pastrami, shoulder bacon salami prosciutto boudin tenderloin kielbasa chuck pork loin. Corned beef rump pastrami, picanha ball tip shankle leberkas cow tenderloin salami hamburger jowl venison ham hock beef. Ham hock ribeye swine picanha. Boudin cow sausage doner pork loin pork chop t-bone, fatback capicola shankle chicken corned beef kielbasa. Spare ribs tongue turkey kielbasa short ribs leberkas meatloaf shank. 
 
</div> 
 
</div>

所有的div開始隱藏的，我們可以使用:target選擇向他們展示鏈接被點擊的時候。

您可以使用JavaScript，e.g做到這一點：

$(".container div:first-child").show(); 
 

 
$("select").change(function() { 
 
    $(".container div").hide(); 
 
    $($("select option:selected").val()).show(); 
 
});

nav { 
 
     width: 100%; 
 
    } 
 

 
    nav a { 
 
     text-decoration: none; 
 
     font-weight: bold; 
 
    } 
 

 
    nav a:after { 
 
     content:' | '; 
 
    } 
 

 
    .container div { 
 
     display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <select> 
 
     <option value="#woupdate1">woupdate1</option> 
 
     <option value="#woupdate2">woupdate2</option> 
 
     <option value="#woupdate3">woupdate3</option> 
 
    </select> 
 

 
    <div class="container"> 
 
    <div id="woupdate1"> 
 
    <h1>woupdate1</h1> 
 
    Bacon ipsum dolor amet hamburger flank turducken, drumstick andouille short loin meatball picanha pork chop capicola sirloin ham hock pork loin bacon porchetta. Rump meatball bresaola pork belly sausage tongue. Biltong spare ribs pork chop, sausage ball tip tenderloin cow hamburger pork shoulder chuck. Ham hock spare ribs tongue drumstick andouille cow rump meatball, corned beef turducken flank prosciutto jerky. Leberkas salami strip steak shoulder. 
 
    </div> 
 

 
    <div id="woupdate2"> 
 
    <h1>woupdate2</h1> 
 
    Drumstick boudin ham tri-tip kielbasa ground round pancetta alcatra ham hock short loin landjaeger. Tongue ground round salami jerky biltong pork andouille ribeye flank sausage doner. Shoulder hamburger sirloin drumstick kielbasa salami sausage pork. Shank pastrami salami pork loin tenderloin kielbasa filet mignon t-bone prosciutto cupim bacon ground round. Doner meatball swine capicola leberkas porchetta pork pig jerky turducken tail. 
 
    </div> 
 

 
    <div id="woupdate3"> 
 
    <h1>woupdate3</h1> 
 
    Tongue jowl pastrami, shoulder bacon salami prosciutto boudin tenderloin kielbasa chuck pork loin. Corned beef rump pastrami, picanha ball tip shankle leberkas cow tenderloin salami hamburger jowl venison ham hock beef. Ham hock ribeye swine picanha. Boudin cow sausage doner pork loin pork chop t-bone, fatback capicola shankle chicken corned beef kielbasa. Spare ribs tongue turkey kielbasa short ribs leberkas meatloaf shank. 
 
    </div> 
 
    </div>

我用的JQuery的簡單性。所有div使用css開始隱藏，JS的第一行顯示第一個div，然後選擇每個選項隱藏所有div並顯示選定的div。

以此爲榜樣，你需要建立的選項，而不是在PHP代碼中的鏈接：

$select .= "<option value='#woupdate". $counter ."'>"woupdate". $counter ."</option>";

希望它能幫助。