Question

我使用php和jquery在我的网页上打印文章。我希望能够在一篇文章中使用show / hide jquery。就像现在一样，当我按下hide或显示我的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>

Jquery代码

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

 }

Answer 1

当您使用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 {{1}中}}

Answer 2

因此，首先，您多次使用相同的ID，将其更改为类（因为id只能使用一次，类可以多次使用）。像这样：

function(o){}

正如你所看到的那样，我将每一个回声连接成一个变量并立即回应它，这是一个更好的方法（性能明智）

现在，对于javascript，您选择了每个$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;代码，而不是我们要查找与article相同的div中的兄弟article {1}}或hide类。

show

你的CSS（现在也是类选择器）

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

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

Answer 3

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

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

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

当时使用hide / show - on元素

3 个答案: