Question

我有一个来自mysql的查询，我当时随机得到一行，我在教书，并且我希望该行只显示一个字段。例如，我希望我的学生看到这本书的标题，我会问他们谁是作者，当他们猜对后，我将单击显示作者或主题的按钮，然后他们将看到作者的姓名或主题。标题。到目前为止，我已经能够查看所有包含它们的信息的字段，但是我无法隐藏作者和主题以仅通过单击每个按钮来显示它们。

<form action="index3.php" method="get">
    <?php while($row = mysqli_fetch_array($result2)): ;?>
    Title of book :  <?php echo $row[3];?>

    <br/><br/>

    <input type="button" value="Author" name="publish"> 

    <?php echo $row[0];?>
    <br/><br/>

    <input type="button" value="Group"><?php echo $row[1];?>
    <br/><br/>

    <input type="button" value="Theme"> <?php echo $row[2];?>
    <br/><br/>

    <input type="submit" value="Next">

</form>

Answer 1

需要一些JavaScript才能显示隐藏的字段。一个有用的技巧是，在此上使用关联数组，当您使用数字数组时（我猜下面的名称），它是不可读的：

jsFiddle of below：https://jsfiddle.net/4sg5wjm3/

<form action="index3.php" method="get">
    <!-- use mysqli_fetch_assoc here instead of mysqli_fetch_array -->
    <?php while($row = mysqli_fetch_assoc($result2)): ?>

    <div class="book-group">

        <h3>Title of book :  <?php echo $row['book_title'] ?></h3>

        <div class="hide pad-bottom author">
            <?php echo $row['author'] ?>
        </div>
        <div class="hide pad-bottom group">
            <?php echo $row['book_group'] ?>
        </div>
        <div class="hide pad-bottom theme">
            <?php echo $row['book_theme'];?>
        </div>

        <a href="#" class="reveal" data-reveal="author">Reveal Author</a>
        <a href="#" class="reveal" data-reveal="theme">Reveal Theme</a>
        <a href="#" class="reveal" data-reveal="group">Reveal Group</a>
        <a href="#" class="reveal-next">NEXT</a>

    </div>

    <?php endwhile;?>
</form>

<!-- Need jQuery library -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>
<script>
// Document ready
$(function(){
    // When user clicks reveal button
    $(".reveal").on('click', function(e) {
        // Stop normal action of <a> tag
        e.preventDefault();
        // Find the parent div, then find the appropriate child div based on
        // what the data- attribute is of the clicked button
        $(this).parents('.book-group').find('.'+$(this).data('reveal')).fadeIn('fast');
    });
});
</script>
<!-- Some styles to make the show/hide work -->
<style>
* {
    font-family: Arial;
}
.hide {
    display: none;
}
.pad-bottom {
    padding-bottom: 1em;
}
a:link,
a:visited {
  background-color: green;
  float: left;
  clear: both;
  padding: 0.5em;
  font-size: 1.2em;
  border-radius: 3px;
  text-decoration: none;
  color: #FFF;
  transition: background-color 0.5s;
  margin: 0.2em;
}
.book-group {
  display: flex;
  flex-direction: row;
  margin: 0.5em;
  padding: 0.5em;
  border-top: 1px solid #ccc;
}
</style>

请注意，我对下一步按钮没有做任何事情，它可以在显示和隐藏book-group类的同一庄园中应用JS，因此一次只能显示一本书。 / p>

我需要在Php中隐藏字段，并在单击每个字段的按钮后将其显示

1 个答案: