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
– effone, Commented Mar 25, 2014 at 22:21
explain "access"... it is very not clear what you are trying to do here — Shay
– Shay, Commented Mar 25, 2014 at 22:21
Your code already works. $('div.info').html(' name : '+ a + 'age : ' + b ); — Calvin
– Calvin, Commented Mar 25, 2014 at 22:27
Your code already works, what version of jquery you are using. .on() will work with jquery > 1.7 version. — Sark
– Sark, Commented Mar 25, 2014 at 22:29
I think the problem is that it only gets the age for name for example... — benomatis
– benomatis, Commented Mar 25, 2014 at 22:29

robbclarke · Accepted Answer · 2014-03-25 22:27:27Z

1

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

answered Mar 25, 2014 at 22:27

robbclarke

7493 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rorymorris · Accepted Answer · 2014-03-25 22:27:03Z

0

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

answered Mar 25, 2014 at 22:27

rorymorris

2231 silver badge4 bronze badges

Comments

teewuane · Accepted Answer · 2014-03-25 22:41:56Z

0

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

answered Mar 25, 2014 at 22:41

teewuane

5,7526 gold badges40 silver badges45 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

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 · Accepted Answer · 2014-03-27 03:49:51Z

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, 2014 at 3:49

answered Mar 25, 2014 at 22:33

Steve Wellens

20.6k2 gold badges31 silver badges70 bronze badges

Collectives™ on Stack Overflow

Append jquery variables into html

5 Answers 5

Comments

Comments

Comments

MAJOR EDIT

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

MAJOR EDIT

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related