Question

我一直在回顾以前的论坛，我知道类似的问题，但是我没找到我到底需要什么。简而言之，我有一个while循环，这个while循环生成hide / show 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>";
}

上面的代码只会显示第一个hide / show 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(){
	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。使用concatenate存储字符串，如：

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

构建选择，例如：

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

然后你可以在他们的位置打印这些变量。记得在while之前定义变量：

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

这只是一种方法，取决于你想要在它可能改变的div中导航的方式。

<强>更新

使用前面示例中的链接和ID，您不需要使用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，例如：

$(".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>";

希望它有所帮助。

单独显示/隐藏通过while循环生成的DIV元素

2 个答案: