onClick 附加 html 到 div / 删除选择表单 div / 添加选择到隐藏字段

Question

我正在尝试创建一个饼干 select 或者允许用户通过电子邮件发送他们的 selection。

我需要一个 on click 事件，当你 select 你的饼干（图像）然后将它添加到饼干桶（篮子）中。
我还需要能够从桶中取出任何饼干。
我还需要将桶中的任何饼干保存到 hidden fields，以便用户可以通过电子邮件发送他们的 selection。

我目前没有 jQuery 但这是我的 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>

这是我动态创建的 HTML 在 select 离子完成后的样子...

//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>

任何帮助/指针/完整代码将不胜感激:)

Answer 1

这里有一些可以帮助您入门的内容 (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);
}

Answer 2

也许是这样的？

http://jsfiddle.net/domslee/7for2opp/1/

HTML:

<ul class="cbp-rfgrid biscuits">
    <li><a href="#" class="biscuit custardcream"><img src="img/biscuit.jpg" />Custard Cream</a>
    </li>
    <li><a href="#" class="biscuit hobnob"><img src="img/biscuit.jpg" />Hobnob</a>
    </li>
    <li><a href="#" class="biscuit jammydodger"><img src="img/biscuit.jpg" />Jammy Dodger</a>
    </li>
</ul>

//Add to Biscuit Barrel (Basket)....
<ul class="cbp-rfgrid basket clearfix">
</ul>
<input type="button" value="Save" id="saveBasket" disabled>

JS:

$(document).on("click", ".biscuit", function(e){
    objName = $(this).attr('class').split(" ")[1];
    img = $(this).find('img').clone();
    if ($(".basket").find("."+objName).length === 0){
        li = $("<li>", {
            name:objName
        });
        newImg = img.clone().addClass("clearfix");
        li.append(newImg).append($("<span>", {
            html:"Remove",
            class:"barrelRemove",
            style:"cursor:pointer"
        }));;
        $(".basket").append(li);
    }
    CheckBasket();
})

$(document).on("click", ".barrelRemove", function(e){
    $(this).parent().remove();
    CheckBasket();

});

function CheckBasket(){
    if ($(".basket li").length > 0){
        $("#saveBasket").prop("disabled", false);
    } else {
        $("#saveBasket").prop("disabled", true);
    }
}

$("#saveBasket").click(function(){
    names = [];
    $(".basket li").each(function(){
        names.push($(this).attr("name"));
    })
    alert("You will now email these names: "+names);
    //$.POST("/path/to/send.php", {names:names}) //This sends a post request, sending the email
})

如果您想通过电子邮件发送（类似这些内容）... PHP (send.php):

<?php
$names = $_REQUEST['names']; //Gets the names array from the $_POST variable

$to      = 'example@example.com';
$subject = 'the subject';
$message = 'Hello, this is the stuffz in your basket'+$names;
$headers = 'From: A Wizard' . "\r\n" .
    'Reply-To: youremail@example.come' . "\r\n" .
    'X-Mailer: PHP/' . phpversion();

mail($to, $subject, $message, $headers);
?>

onClick 附加 html 到 div / 删除选择表单 div / 添加选择到隐藏字段

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

jquery

loops

append

onclick