当时使用隐藏/显示 - 在元素上 - Using hide/show - on element at the time

我正在使用php和jquery在我的网页上打印文章。我希望能够同时在一篇文章上使用显示/隐藏jquery。就像现在一样，当我按隐藏或显示 foreach 循环中的所有<article>元素都会受到影响。

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>

J查询代码

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

.CSS

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

因此，首先，您多次使用相同的 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;

如您所见，我已经将每个回声连接成一个变量并一次回显所有回显，这是一个更好的 aproach（性能方面）

现在对于 JavaScript，您选择每个 article 标签，而不是这个，我们将查找与 hide 或 show 类位于同一div 内的同级article。

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

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

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

由于您使用 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>";
  }
?>

.css：

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

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

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

.hide和.show按钮是元素的同级，那么您只需要使用 .siblings() 访问其同级文章，因为它们都包含在div .pub 中。

你可以要求 Jquery 隐藏点击元素上方的第一篇文章：

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

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