javascript - 点击按钮 显示更多,自定义变量显示不出来?
本文介绍了javascript - 点击按钮 显示更多,自定义变量显示不出来?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
点击按钮 显示更多,自定义变量显示不出来?
提示错误信息:、
想要达到的效果:
点击按键一次更多,多显示3条信息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>显示更多</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/demo10.css">
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<div class="arctive">
<div class="votebar">
<span class="votebar_icon"></span>支持
</div>
<div class="author">
<b>小明1</b>这是我的个性签名
<p>288个赞同</p>
</div>
<div class="content">
本回答分成【旅游版】和【日常版】,游客和长时间生活在长沙的人需求不一样所以分开写啦。高票答主提到的那些也不赘述。
</div>
</div>
<div class="arctive">
<div class="votebar">
<span class="votebar_icon"></span>支持
</div>
<div class="author">
<b>小明2</b>这是我的个性签名
<p>288个赞同</p>
</div>
<div class="content">
本回答分成【旅游版】和【日常版】,游客和长时间生活在长沙的人需求不一样所以分开写啦。高票答主提到的那些也不赘述。
</div>
</div>
<a href="javascript:void(0)" class="more">更多</a>
</div>
</body>
</html>
<script>
$(document).ready(function() {
// console.log(00);
$(".more").click(function(){
// console.log(0);
var name="用户名";
var bio="个性签名";
var num="赞同数";
var answer="回答内容";
var more="<div class='arctive'> <div class='votebar'> <span class='votebar_icon'></span>支持 </div> <div class='author'> <b>"+name+"</b>"+bio+" <p>"+num+"个赞同</p> </div> <div class='content'>"+ answer+" </div> </div>";
// var more="<div class='arctive'> <div class='votebar'> <span class='votebar_icon'></span>支持 </div> <div class='author'> <b>何大宝1</b>这是我的个性签名 <p>288个赞同</p> </div> <div class='content'> 本回答分成【旅游版】和【日常版】,游客和长时间生活在长沙的人需求不一样所以分开写啦。高票答主提到的那些也不赘述。 </div> </div>";
// $(".more").before("abc");
for(var i=0;i<3;i++){
$(".more").before(more);
}
})
});
</script>
CSS部分
body,ul,li,p,input,dt,dl,dd,form,textarea,th,td,select,h1,h2,h3,h4,h5,h6,a,div{
padding:0px;
margin:0px;
}
body{
font-size: 14px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
background: #fff;
}
.container{
width: 640px;
margin: 50px auto;
}
.arctive{
position: relative;
padding-bottom: 12px;
border-bottom: 1px solid #eee;
margin-bottom: 14px;
}
.votebar{
background:#eff6fa;
width:38px;
/*height: 28px;*/
color:#698ebf;
line-height: 28px;
/*padding:2px 0;*/
text-align: center;
position: absolute;
left: -50px;
border-radius: 4px;
}
.author{
color:#333;
}
.author b{
color:#000;
padding-right: 7px;
}
.author p{
line-height: 1.8em;
}
.content{
line-height: 1.5em;
}
.votebar_icon {
width: 0px;
height: 0px;
border: 6px solid transparent;
border-bottom: 6px solid #698ebf;
display: block;
margin-left: 13px;
}
.more{
color: #666!important;
text-shadow: 0 1px 0 #fff;
background: #f1f1f2;
background: -webkit-linear-gradient(top,#f8f8f9,#e6e6e8);
background: linear-gradient(to bottom,#f8f8f9,#e6e6e8);
border: 1px solid #bbb;
box-shadow: 0 1px 0 #fff inset,0 1px 0 rgba(0,0,0,.1);
padding:6px;
text-align: center;
margin-top: 20px;
display: block;
}
解决方案
你的分号貌似用的是中文分号!!
var name="用户名";
var bio="个性签名";
var num="赞同数";
var answer="回答内容";
这几个貌似都是中文分号
这篇关于javascript - 点击按钮 显示更多,自定义变量显示不出来?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文