CODEWITHSUNDEEP
jqueryhtml
user3446643
user3446643

Reputation: 15

Append jquery variables into 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;}

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 .

Upvotes: 0

Views: 69

Answers (5)

Steve Wellens
Steve Wellens

Reputation: 20620

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

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

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

Upvotes: 0

benomatis
benomatis

Reputation: 5633

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.

Upvotes: 0

teewuane
teewuane

Reputation: 5734

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

Upvotes: 0

robbclarke
robbclarke

Reputation: 749

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

Upvotes: 1

rorymorris
rorymorris

Reputation: 223

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

Upvotes: 0

Related Questions