Question

我正在尝试创建一个饼干选择器，然后允许用户通过电子邮件发送他们的选择。

我需要一个click事件，当您选择饼干（图像）时，它会将其添加到饼干桶（篮子）中。
我还需要能够从桶中取出任何饼干。
我还需要将桶中的任何饼干保存到hidden fields，以便用户可以通过电子邮件发送选择。

我目前没有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应该在选择完成后看起来......

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

这样的事可能吗？

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

Answer 2

这是让你入门的事情（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);
}

onClick将html附加到div / remove选择表格div /将选择添加到隐藏字段

2 个答案: