Javascript 同时使用hide/show-on元素

我正在使用php和jquery在我的网页上打印文章。我希望能够一次对一篇文章使用show/hide jquery。现在，当我按下hide或show时，foreach循环中的所有

元素都会生效

HTML和PHP代码

<section class='col-md-8'> <!-- Div for content, images etc. -->


<?php

$page = new CMS();
$gp = $page->getPage();


 foreach ($gp as $sp) {
  //var_dump($sp);

  echo "<div id='pub'>";
  echo "<h4>" . $sp['title'] . "</h4>"; 
  echo "<article id='pub_art'>" . $sp['content'] . "</article>";  
  echo "<p>" . $sp['created'] . "</p>"; 
  echo "<p>". $sp['writer'] ."</p>";
  echo "<button id='hide'>Hide</button>";
  echo "<button id='show'>Show</button>";
  echo "</div>";

}
?>

</section>

CSS

#公共艺术{
宽度：100%；
身高：100%；
背景颜色：蓝色；
显示：无；
}

当您使用php为多个元素实例生成具有相同id的无效标记时，请将属性

id

更改为

class

：

<?php
  $page = new CMS();
  $gp = $page->getPage();


 foreach ($gp as $sp) {
  //var_dump($sp);

    echo "<div class='pub'>"; // <-----here
    echo "<h4>" . $sp['title'] . "</h4>"; 
    echo "<article class='pub_art'>" . $sp['content'] . "</article>"; //<---here 
    echo "<p>" . $sp['created'] . "</p>"; 
    echo "<p>". $sp['writer'] ."</p>";
    echo "<button class='hide'>Hide</button>"; // <------here
    echo "<button class='show'>Show</button>"; // <------here
    echo "</div>";
  }
?>

现在，您可以使用此脚本工作：

$(document).ready(function(){
    $(".hide, .show").click(function(){
        $(this).siblings("article").toggle(this.className === 'show');
    });
 });

---

.hide

和

.show

按钮是元素的同级按钮，那么您只需要使用

.sides（）

访问its同级文章，因为它们都被包装在一个div

.pub

中，因此，首先，您多次使用相同的id，将它们改为类（因为id只能使用一次，类可以使用多次）。如下所示：

$output = '';
foreach($gp as $sp){
    $output .= "<div class='pub'>";
        $output .= "<h4>" . $sp['title'] . "</h4>"; 
        $output .= "<article class='pub_art'>" . $sp['content'] . "</article>";  
        $output .= "<p>" . $sp['created'] . "</p>"; 
        $output .= "<p>". $sp['writer'] ."</p>";
        $output .= "<button class='hide'>Hide</button>";
        $output .= "<button class='show'>Show</button>";
    $output .= "</div>";
}
echo $output;

还有你的CSS（现在还有类选择器）

---

通过这样做，您可以要求Jquery在单击的元素上方隐藏第一篇文章：

$(document).ready(function(){
    $("#hide").click(function(){
        $(this).prev("article").hide();
    });
    $("#show").click(function(){
        $(this).prev("article").show();
    });
 });

---

但是，我建议您更改您的PHP，使其生成唯一的ID，以便创建有效的HTML。

尝试此

$（文档）。在（“单击”，“隐藏”，函数（）{$（“文章”）.toggle（）；}；

这将如何工作@guradio？，

$（“文章”）

selector接受每一篇文章，而不仅仅是一篇什么是

article

class或

id

@mackeemackee你试过我给你的评论了吗？但是你只会使用一个按钮，不管按钮是否是动态添加的？就像上面的答案一样，它工作正常，但我的隐藏按钮消失了？它已经消失了当我将它更改为类时，这似乎起了作用，但我的隐藏按钮不见了：P当我将它从id更改为类时，它会消失？这很可怕，当你检查元素时，你能看到它的html吗？是的，我能在中看到它它在css属性中是否有

显示：无；

或类似的内容？引导是个问题！：）

$output = '';
foreach($gp as $sp){
    $output .= "<div class='pub'>";
        $output .= "<h4>" . $sp['title'] . "</h4>"; 
        $output .= "<article class='pub_art'>" . $sp['content'] . "</article>";  
        $output .= "<p>" . $sp['created'] . "</p>"; 
        $output .= "<p>". $sp['writer'] ."</p>";
        $output .= "<button class='hide'>Hide</button>";
        $output .= "<button class='show'>Show</button>";
    $output .= "</div>";
}
echo $output;

$(document).ready(function(){
    $(".hide").click(function(){
        $(this).siblings('article').hide();
    });

    $(".show").click(function(){
        $(this).siblings('article').show();
    });
});

.pub_art {
    width: 100%;
    height: 100%;
    background-color: blue;
    display: none;
}

$(document).ready(function(){
    $("#hide").click(function(){
        $(this).prev("article").hide();
    });
    $("#show").click(function(){
        $(this).prev("article").show();
    });
 });