Question

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;}

JS

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();
    });
};

HTML

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

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

Answer 1

假设您要使用点击事件中的数据填充这些新div，我已经制作了jsfiddle with a working example here。

修改后的HTML

<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();
});

Answer 2

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

<div class="button" data-name="David" data-id="33">My button</div>

$('.button').click(function(){  
    var name = $(this).attr('data-name');
    var id = parseInt($(this).attr('data-id'));
    alert(name+' '+id);
});

Answer 3

这是你追求的吗？

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();
    });
};

<强> Fiddle here

MAJOR EDIT

根据您编辑的问题和我相信我从中理解的内容，我提出了以下内容。它基本上是＆＃34;解析＆＃34;您的done函数调用并将一对中的第一个成员作为名称，每秒作为一个年龄，然后当您单击每个名称时，它将单独显示其详细信息。当你点击另一个名字时，我甚至引入了一个快速隐藏以前的细节。此代码使用函数arguments属性。

function done() {
    for (var i=0, n=0, a=0, name = [], age = []; i<arguments.length; i++) {
        if (i % 2 === 0) {
            name[n] = arguments[i];
            n++;
        }
        if ((i+1) % 2 === 0) {
            age[a] = arguments[i];
            a++;
        }
    }
    for (var i=0; i<name.length; i++) {
        $(".info-holder").append("<div class='jj' id='"+i+"' >" + name[i] + "<div>");        
    }
    $(document).on("click", ".jj", function () {
        $('div.info').html('').hide();
        $('div.info').html('name: ' + name[this.id] + ' - age:' + age[this.id]);
        $('div.info').fadeIn();
    });
};

您可以使用 this fiddle demo 进行试用。

Answer 4

你的div需要关闭（错过斜线）：

<div class='jj' >"  +  b +   "<div>"     (wrong)

<div class='jj' >"  +  b +   "</div>"    (right)

Answer 5

请参阅我的jsfiddle here。这是你想要做的吗？

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();
    });
};

将jquery变量附加到html中

5 个答案:

MAJOR EDIT