javascript - 点击按钮 显示更多,自定义变量显示不出来?

查看:154
本文介绍了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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆