JavaScript不工作在随机引号生成器

JavaScript not working in Random Quotes Generator

本文关键字：随机 工作 JavaScript      更新时间：2023-09-26

我正在做这个项目，我将有100左右的报价，将随机显示当用户点击按钮。它还会显示引用作者的名字，这也是一个链接到他们的网站/维基百科页面。

当我在浏览器中打开这个文件时，除了作者没有显示为链接外，一切都工作正常。我试着把我的代码到codependency和链接显示，但淡出效果不工作。我要把这个放在我的wordpress网站上，当我上传它的时候，链接没有显示出来!

我已经想了好几天了，但我完全卡住了!有人可以看看我的代码，告诉我，如果他们看到什么是错的?我是自学的，仍然是初学者，所以我真的很有兴趣弄清楚这一点!谢谢你！

这是JS(让我知道如果你需要我张贴HTML和CSS):

$(document).ready(function() {
  var qList = [{
    quote: "Lorem ipsum dolor sit amet, ut vivamus nulla cras wisi, consectetuer id sed leo tortor, et est et imperdiet vel. Vestibulum proin ante sit, risus odio consectetuer fermentum. Mus quisque eget orci in, platea fringilla aliquet euismod, pellentesque erat sapien ad. Vestibulum interdum ac arcu, rutrum dolor etiam at wisi. Eget bibendum amet vitae, cum est metus pellentesque, metus aenean tortor consequat, habitasse vel aliquam pulvinar in. Et libero ut est pede, aute mollis lectus etiam semper, bibendum sed urna non porta, mus bibendum eu vel. Arcu nunc arcu risus, quisque assumenda leo natoque sodales.",
    auth: "Id Ante",
    site: "http://www.google.com"
   }, 
   {
    quote: "Felis commodo sed et, erat vel elit purus. Neque enim sed condimentum placerat, nulla eu consequat eu. Fusce diam eleifend libero eget, pellentesque molestias aliquam nec, egestas morbi nunc justo. Arcu platea nunc turpis, sit fringilla iaculis turpis nec, ut fusce lacus dis, porta accumsan eget viverra feugiat. Metus quisque aliquet mus, quam dictum ipsum fringilla.",
    auth: "Maris Nunc",
    site: "http://www.google.com"
  },
  {
    quote: "Enim erat gravida at id, lacinia aliquam viverra vel vitae, felis nascetur quam mauris, dolor aenean eget morb",
    auth: "Ick Vrouw",
    site: "http://www.google.com"
   },
   {
    quote: "Aliquam hendrerit neque a ornare tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam convallis justo tristique nisi tincidunt pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
    auth: "Sed Librio",
    site: "http://www.google.com"
   },
   {
    quote: "Fusce in volutpat urna. Mauris tellus felis, semper et scelerisque quis, tristique eu lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin quis fringilla justo. Morbi eu tristique neque.Etiam pellentesque tincidunt dui, in congue urna bibendum non. Mauris dignissim nisi nec ante accumsan tincidunt. Integer lorem urna, pharetra vitae aliquam id, consequat eget felis",
    auth: "Een Boterham",
    site: "http://www.google.com"
   },
   {
    quote: "Morbi arcu nunc, aliquam sit amet dictum ac, eleifend a sapien. Suspendisse nec eros non dui condimentum commodo ut a puru",
    auth: "Egestas nunc ac eu. Eleifend quisque amet hymenaeos eget, massa lorem nibh etiam suscipit ullamcorper, aenean aenean. Nascetur a, ultricies vitae suspendisse in, et sit. Ut non urna, quis urna litora cras luctus, amet at congue tincidunt eget. Morbi volutpat posuere, id facilisis velit. Donec condimentum felis etiam ipsum volutpat curabitur.",
    site: "http://www.google.com"
   }];
  function getRandomNum(min, max) { 
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  var button = $(".btn-primary");
  function getQuotes () {
    var quoteNum = getRandomNum(0, qList.length);
    $(".btn-primary").text("Next Pep Talk");
    $("#thequote").text(qList[quoteNum].quote);
    $("#theauth").text(qList[quoteNum].auth);
    $("#theauth").attr("href", qList[quoteNum].site);
  }

   getQuotes();

  function fading () { 
      $(".fade").fadeIn("fast");
    }

  fading();

  button.click(function() {
    getQuotes();
    fading();
  });

});

HTML: 

<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="quotegen.css">
<title>Quote Example</title>


</head>
<body>
    <div class="quote-generator">
        <h2 class="text-primary text-center">The Quote Generator</h2>

            <div class="quote-text" id="quoteplace" class="row center- block">
                <p id="thequote" class="fade" class="col center-block">.</p>

            </div>
            <div class="writer" class="center-block">
                <i class="fa fa-heart-o"></i><br >
                <p id="theauth" class="fade" class="col center-block"></p><br /> <br />
            </div>

        <div class="center-block">
        <button type="button" id="button" class="btn btn-primary center-block">Next Pep Talk</button><br /><br />
        </div>
        <div class="quote-description">The Quote Generator is a project by XXX<br />

        </div>


    </div>  

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="quotegen.js" type="text/javascript"></script>

</body>
</html>

如果你也想要的话，这里是CSS: 

.quote-generator { 
margin: 50px auto; 
width: 65%; 
text-align: center; 
border:1px black dotted;
padding:50px;
}
.quote-generator input[type="submit"], button {
 cursor: pointer;
margin-top: 30px;
overflow: visible;
border: 1px solid #f05525;
background: white;
font-family:"Raisonne Demibold","Century Gothic", Verdana, sans-serif; 
font-size: 130%;
letter-spacing: 2px;
text-transform: uppercase;
padding: 10px 30px;
color: #f05525;
} 
.quote-generator input[type="submit"], button:hover {
color: black;
border: 1px solid black;
}
.quote-generator a { 
border-bottom: 1px dotted #f05525;
padding-bottom: 2px;
}
.quote-generator a:hover {
border-bottom: 1px dotted black;
color: black;
}

.quote-generator h2 { 
font-family:"Raisonne Demibold", "Cardo" "Century Gothic", Verdana, sans-serif; 
font-size: 250%; 
margin: 0 0 50px 0;
color: #f05525;
}
.writer {
font-style: italic;
font-variant: normal;
font-weight: 500;
letter-spacing: 1px;
font-size: 80%;
}
.quote-text {
border-left: 1px dotted black;
border-right: 1px dotted black;
font-size: 130%;
line-height: 145%;
margin: 0 0 20px;
padding: 30px;
text-align: left;   

}
.quote-description {
font-style: italic;
font-variant: normal;
font-weight: 500;
font-size: 90%;
letter-spacing: 1px;
margin-bottom: 20px;    
}

#theauth {
margin-left:15px;
}

看不到完整的HTML，但请确保

$("#theauth").text(qList[quoteNum].auth);
$("#theauth").attr("href", qList[quoteNum].site);

指的是链接元素，而不是div或其他元素…

这里有一个小提琴

<a id="theauth"></a>

允许我们动态设置HREF。祝你好运。

here a fiddle I did

相关文章：