我正在做这个项目，我会有100个左右的引号，当用户点击按钮时会随机显示。它还将显示引用作者的名称，该名称也是其网站/维基百科页面的链接。
当我在浏览器中打开此文件时，除了作者没有显示为链接外，一切正常。我尝试将我的代码放入codepen中，链接显示但fadeIn效果不起作用。我将在我的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，那么这就是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;
}
答案 0 :(得分：0)
看不到您的完整HTML，但请确保
$("#theauth").text(qList[quoteNum].auth);
$("#theauth").attr("href", qList[quoteNum].site);
指的是link元素，而不是div或其他元素......
这是一个有一个
的小提琴<a id="theauth"></a>
然后允许我们动态设置HREF。祝它好运。
继承人fiddle I did