将jquery变量追加到html中

CSS

.info { display:none; background: rgba(0,0,0,.4); width: 400px; height: 100px; margin: 50px auto; padding: 15px;}
.button {width: 40px; height: 20px; background:red; cursor:pointer;}
.jj {width: 120px; height: 80px; background:gray; color:white;  cursor:pointer;}

function done(a, b, c,d) {
    $(".info-holder").append("<div class='jj' >" + a + "<div>");
    $(".info-holder").append("<div class='jj' >" + c + "<div>");
    $(document).on("click",".jj", function() {  
        $('div.info').html(' name : '+  $(this).html() + 'age  : ' +$(this).html()  );      
        $('div.info').fadeIn();
    });
};

JS

.info { display:none; background: rgba(0,0,0,.4); width: 400px; height: 100px; margin: 50px auto; padding: 15px;}
.button {width: 40px; height: 20px; background:red; cursor:pointer;}
.jj {width: 120px; height: 80px; background:gray; color:white;  cursor:pointer;}

function done(a, b, c,d) {
    $(".info-holder").append("<div class='jj' >" + a + "<div>");
    $(".info-holder").append("<div class='jj' >" + c + "<div>");
    $(document).on("click",".jj", function() {  
        $('div.info').html(' name : '+  $(this).html() + 'age  : ' +$(this).html()  );      
        $('div.info').fadeIn();
    });
};

功能完成（a、b、c、d）{
$（“.info持有人”）。追加（“+a+”）；
$（“.info持有人”）.append（“+c+”）；
$（document）.on（“click”，“.jj”，function（）{
$（'div.info'）.html（'name:'+$（this.html（）+'age:'+$（this.html（））；
$（'div.info'）.fadeIn（）；
});
};

HTML

<div class="button" onclick="done('david',33, 'john', 44)">click</div>
<div class="info-holder"></div>
<div class="info"></div>

<div class="button" data-name="david" data-age="33">click</div>
<div class="info-holder"></div>
<div class="info"></div>

点击

---

这是代码，我不知道如何访问这两个变量，可能看起来很混乱，但这不是我真正的代码，我只是解释我的问题，所以如果有人知道如何访问这些变量，请告诉我

考虑使用数据属性将数据从HTML标记传递到JavaScript

My按钮

---

这就是你想要的吗

function done(a, b) {
    $(".info-holder").append("<div class='jj' >" + b + "<div>");
    $(document).on("click", ".jj", function () {
        $('div.info').html('name: ' + a + ' - age:' + b);
        $('div.info').fadeIn();
    });
};

---

您可以使用

进行尝试，假设您希望使用来自单击事件的数据填充这些新div，我已经做了一个简单的修改

修改的HTML

<div class="button" onclick="done('david',33, 'john', 44)">click</div>
<div class="info-holder"></div>
<div class="info"></div>

<div class="button" data-name="david" data-age="33">click</div>
<div class="info-holder"></div>
<div class="info"></div>

点击

新建jQuery

$('.button').on('click', function(){
    var a = $(this).attr('data-name');
    var b = $(this).attr('data-age');
    $(".info-holder").append("<div class='jj' >"  +  b +   "<div>");
    $('div.info').html('name: '+  a + ' age: ' + b  );      
    $('div.info').fadeIn();
});

$（'.button'）。在（'click'，function（）上{
var a=$（this.attr（'data-name'）；
var b=$（this.attr（'data-age'）；
$（“.info持有人”）。追加（“+b+”）；
$（'div.info'）.html（'name:'+a+'age:'+b）；
$（'div.info'）.fadeIn（）；
});

您的div需要关闭（缺少斜线）：

“+b+”（错误）
“+b+”（右）

查看我的JSFIDLE。这就是你想做的吗

var done = function (a, b) {
    var jj = $("<div/>", {
        'class': 'jj',
        'data-age': b,
        'data-name': a,
        'html': b
    }).appendTo($(".info-holder"));

    jj.on('click', function () {
        $('div.info').html(
            'name : ' + jj.attr('data-name') + ' age: ' + jj.attr('data-age')
        ).fadeIn();
    });
};

var done=函数（a，b）{
var jj=$（“”{
‘class’：‘jj’，
“数据时代”：b，
“数据名”：a，
'html'：b
})。附件（$（“.info持有人”）；
jj.on（'click'，函数（）{
$（'div.info'）.html(
'name:'+jj.attr（'data-name'）+'age:'+jj.attr（'data-age'））
).fadeIn（）；
});
};

您必须从何处访问？你在哪里用过“大卫”？我完全不知道你想要完成什么…解释一下“访问”。。。现在还不清楚你想在这里做什么，你的代码已经运行了$（'div.info'）.html（'name:'+a+'age:'+b）；您的代码已经运行，您使用的是哪个版本的jquery。on（）将用于jquery>1.7版本。我认为问题在于它只获取名称的年龄，例如。。。