Append jquery variables into html

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>

This is the code , i don't know how to access to that two variables ,it maybe looks messy but this is not my real code , i just explain my problem , so please if someone know how to access to those variables that way , show me .

From where you have to access? Where you have used 'david'? I'm totally lost to figure out what you wanna accomplish ... — effone, Mar 25 '14 at 22:21
explain "access"... it is very not clear what you are trying to do here — Shay, Mar 25 '14 at 22:21
Your code already works. $('div.info').html(' name : '+ a + 'age : ' + b ); — Calvin, Mar 25 '14 at 22:27
Your code already works, what version of jquery you are using. .on() will work with jquery > 1.7 version. — Sark, Mar 25 '14 at 22:29
I think the problem is that it only gets the age for name for example... — benomatis, Mar 25 '14 at 22:29
i edit the code i hop you understand what i want, because i don't know how to explain it. — user3446643, Mar 25 '14 at 23:14
think you got sufficient answers here, make sure you review them and amend your question or add comments to the answers specifying what you're still missing... — benomatis, Mar 26 '14 at 06:58
where does the data inside `onclick="done('david',33, 'john', 44)` come from? is this something dynamically generated or static? can this be more than just 2 name / age pairs? — benomatis, Mar 26 '14 at 07:03
if I understand well what you want, you may want to look into `arguments` - more on this [in this question](http://stackoverflow.com/questions/2141520/javascript-variable-number-of-arguments-to-function) — benomatis, Mar 26 '14 at 07:39

score 1 · Answer 1 · answered Mar 25 '14 at 22:27

On the assumption that you want to populate those new divs with data from the click event, I've made a jsfiddle with a working example here.

Modified HTML

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

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

score 0 · Answer 2 · answered Mar 25 '14 at 22:27

Consider data attributes to pass data from your HTML markup to your 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);
});

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

Is this what you were after?

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

According to your edited question and what I believe I understood from it, I came up with the below. It basically "parses" your done function call and takes ever first member of a pair as a name, and every second as an age, then when you click each name, it will show their details individually. I even introduced a quick one to hide the previous details when you click another name. This code makes use of a functions arguments property.

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

You can try it out using this fiddle demo.

Steve Wellens · Answer 4 · 2014-03-27T03:49:51.260

0

Your div needs to be closed (missed the slashes):

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

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

edited Mar 27 '14 at 03:49

answered Mar 25 '14 at 22:33

Steve Wellens

20,506
2
28
69

score 0 · Answer 5 · answered Mar 25 '14 at 22:41

See my jsfiddle here. Is this what you are trying to do?

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

Append jquery variables into html

5 Answers5

MAJOR EDIT