【发布时间】：2015-08-01 21:13:53
【问题描述】：
我正在做这个项目，当用户单击按钮时，我将有 100 个左右的引号随机显示。它还将显示引用作者的姓名，这也是指向其网站/维基百科页面的链接。
当我在浏览器中打开这个文件时，一切正常，除了作者没有显示为链接。我尝试将我的代码放入 codepen 并显示链接，但淡入淡出效果不起作用。我将在我的 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/CSS 以及是否可以制作小提琴/codepen。
-
这里是codepen的链接：codepen.io/anon/pen/Jdwyrb
-
现在我看到了你的小提琴，是的，就像我想的那样...#theauth，为了分配 HREF，需要一个链接。您可以让它保留一个 P 元素，但随后必须使用 onclick 来处理超链接......如果这有意义的话。请参阅下面的答案以获取我的小提琴示例。
标签： javascript jquery wordpress multidimensional-array