Amesey Amesey - 4 months ago 18
jQuery Question

onClick append html to div / remove selection form div / add selection to hidden field

I'm trying to create a biscuit selector which then allows user to email their selection.


  1. I need an on
    click
    event that when you select your biscuit (image) it then adds it to the biscuit barrel (basket).

  2. I also need to be able to remove any biscuits from the barrel.

  3. I also need to save any biscuits in the barrel to
    hidden fields
    so that the user can email their selection.



I currently have no
jQuery
but here is my HTML...

//Select your biscuit...
<ul class="cbp-rfgrid biscuits">
<li><a href="#" class="biscuit custardcream"><img src="img/biscuit.jpg" /><div><h3>Biscuit</h3></div></a>
</li>
<li><a href="#" class="biscuit hobnob"><img src="img/biscuit.jpg" /><div><h3>Biscuit</h3></div></a>
</li>
<li><a href="#" class="biscuit jammydodger"><img src="img/biscuit.jpg" /><div><h3>Biscuit</h3></div></a>
</li>
</ul>


This what my dynamicaly created HTML should look like once a selection has been made...

//Add to Biscuit Barrel (Basket)....
<ul class="cbp-rfgrid basket clearfix">
<li><a href="#"><img src="img/custardcream.pg" class="clearfix"><div>remove</div></a>
</li>
<li><a href="#"><img src="img/hobnob.pg" class="clearfix"><div><h3>remove</h3></div></a>
</li>
<li><a href="#"><img src="img/jammydodger.pg" class="clearfix"><div><h3>remove</h3></div></a>
</li>
</ul>


any help / pointers / full code would be most appreciated :)

Answer

Here's something to get you started (JSFiddle demo with actual biscuits):

<ul>
    <li><button type="button" data-biscuit="custard-cream">Custard Cream</button></li>
    <li><button type="button" data-biscuit="hobnob">Hobnob</button></li>
    <li><button type="button" data-biscuit="jammy-dodger">Jammy Dodger</button></li>
</ul>

<ul class="barrel"></ul>

jQuery:

var barrel_items = [];

$('[data-biscuit]').click(function(){
    var biscuit = $(this).data('biscuit');
    add_to_barrel(biscuit);
});

$(document).on('click', '[data-biscuit-remove]', function(){
    var item = $(this).data('biscuit-remove');
    barrel_items.splice( $.inArray(item, barrel_items), 1 );
    $(this).closest('li').remove();
});

function add_to_barrel(item){
    if($.inArray(item, barrel_items) !== -1){
        return;
    }
    var img = '';
    switch(item){
        case 'custard-cream':
            img = 'https://pbs.twimg.com/profile_images/543271264970739712/04-5xG6V_normal.jpeg';
            break;
        case 'hobnob':
            img = 'http://1.bp.blogspot.com/_j1gTid5Yr3U/SaOjmZKi30I/AAAAAAAAAAM/TNE2Jzrkvjc/S45-s35/hobnob.jpg';
            break;
        case 'jammy-dodger':
            img = 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xfa1/v/t1.0-1/p50x50/28259_106018496114332_6926964_n.jpg?oh=7a3218fa4a589983b7b3922a6a2aec7a&oe=55ECBFE3&__gda__=1445296810_8f68d401fc1935c22a2577f73a3ac5bd';
            break;
    }
    $('.barrel').append("<li><img src=" + img + "><button type='button' data-biscuit-remove='" + item + "'>Remove</button></li>");
    barrel_items.push(item);
}
Comments