Question

我正在制作一个随机名称生成器，我希望在用户点击按钮时显示一个随机名称。但是，当用户点击此按钮时，我的内容只会在屏幕上短暂闪烁。

<!DOCTYPE html>
<html>
<head>
    <title>Grand National 2016 Randomizer</title>
</head>
<body>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <section class="hero">
        <div class="row intro">
            <div class="small-centered medium-uncentered medium-6 large-7 columns">
            <h1>Grand National 2016</h1>
            <div id="submit">
                <form method ='post'>
                    <input type='submit' name='submit'>
                </form>
            </div>
        <p>
        <?php
            $horses = array();

            // pushing all the runners of the 2016 Grand National
            array_push($horses, "Many Clouds");
            array_push($horses, "MaSilviniaco Conti");
            array_push($horses, "First Lieutenant");
            array_push($horses, "Wonderful Charm");
            array_push($horses, "Ballynagour");
            array_push($horses, "O'Faolains Boy");
            array_push($horses, "Gilgamboa");
            array_push($horses, "On His Own");
            array_push($horses, "The Druids Nephew");
            array_push($horses, "Triolo D'Alene");
            array_push($horses, "Rocky Creek");
            array_push($horses, "Sir Des Champs");
            array_push($horses, "Holywell");
            array_push($horses, "Shutthefrontdoor");
            array_push($horses, "Soll");
            array_push($horses, "Buywise");
            array_push($horses, "Boston Bob");
            array_push($horses, "Aachen");
            array_push($horses, "Morning Assembly");
            array_push($horses, "Double Ross");
            array_push($horses, "Goonyella");
            array_push($horses, "Ucello Conti");
            array_push($horses, "Unioniste");
            array_push($horses, "Le Reve");
            array_push($horses, "Gallant Oscar");
            array_push($horses, "Onenightinvienna");
            array_push($horses, "The Last Samuri");
            array_push($horses, "Kruzhlinin");
            array_push($horses, "Rule The World");
            array_push($horses, "Just A Par");
            array_push($horses, "Katenko");
            array_push($horses, "Vics Canvas");
            array_push($horses, "Black Thunder");
            array_push($horses, "Ballycasey");
            array_push($horses, "Hadrian's Approach");
            array_push($horses, "Vieux Lion Rouge");
            array_push($horses, "Pendra");
            array_push($horses, "Saint Are");
            array_push($horses, "Home Farm");
            array_push($horses, "The Romford Pele");
            array_push($horses, "Knock House");
            array_push($horses, "Bishops Road");
            array_push($horses, "Pineau De Re");
            array_push($horses, "Alvarado");
            array_push($horses, "Highland Lodge");
            array_push($horses, "Maggio");
            array_push($horses, "Perfect Candidate");
            array_push($horses, "Present View");

            //sorting Array
            sort($horses);

            // Randomly select a winner!
            $counter = count($horses) - 1;
            $random = rand(0, $counter);

            print $horses[$random]; 
        ?>
      </p>
    </div>
</section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

CSS：

.hero {
  background-image: url("image.jpg");
  background-size: cover;
  height: 99vh; }

  .hero:before {
    height: 100%;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom right, #ccffdd, black);
    opacity: .8; }

  .hero .intro {
    padding: 3rem;
    position: relative;
    top: 50%;
    transform: translateY(-50%); }
  .hero h1 {
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.5em;
    letter-spacing: -0.025em;
    font-weight: 300;
    text-align: center; }
  .hero p {
    color: #fff;
    line-height: 1.75em;
    font-weight: 200;
    text-align: center;
    margin-bottom: 2rem; }
  @media only screen and (min-width: 40.063em) {
    .hero h1 {
      text-align: center;
      font-size: 2.5rem; }
    .hero p {
      color: gold;
      text-align: center; 
      font-size: 1.5rem;
      display: none;} 
      #submit {
        text-align: center;
        }}

这是我的Jquery代码：

$(function() {
    $("#submit").on("click", function(){
        $('p').show();
    });
});

Answer 1

这是因为您点击的元素实际上是<input type='submit' />按钮，导致页面被提交/发布到服务器。

如果要防止发生此默认行为，可以在jQuery调用中使用e.preventDefault()函数：

$(function() {
    $("#submit").on("click", function(e){
        // Stop the default behavior (submission)
        e.preventDefault();
        $('p').show();
    });
});

请注意，这可能导致您的<form>未按预期提交，因此如果您仍需要进行调整，则可能需要调整您的使用情况。

Answer 2

按照以下步骤操作：

注意：我不是在写完整的代码，只是想告诉你该怎么做。

在您的PHP文件中，例如index.php：

<?php

// your data array
$horses = array("Many Clouds", "MaSilviniaco Conti" /* ... */);

?>
<!DOCTYPE html>
.
.
.
<a href="index.php">Get Random</a>
<p> <?=$horses[ rand(0, count($horses) - 1) ]?> </p>
.
.
.

它不需要像jQuery和其他任何东西......除非你要有一些额外的JavaScript功能，比如使用xhr从服务器端检索数据或者在客户端操作DOM。飞行或与用户行为互动。

Answer 3

使用下面的内容。它正在发生，因为表单提交并刷新页面。你需要使用如下的e.preventdefault

 <script>
 $( "a" ).click(function( event ) {
 event.preventDefault();
 $( "<div>" )
   .append( "default " + event.type + " prevented" )
   .appendTo( "#log" );

}）;

如何在用户点击时在屏幕上显示<p>

3 个答案: