Jquery 通过单击篮子中的item元素从篮子中移除项目

我把饼干放进桶里然后取出的小计划几乎完成了。我可以通过单击最初添加饼干的按钮来移除饼干。然而，我正在努力通过单击桶中添加的饼干的元素，将饼干从桶中取出。因此，我试图实现的最终结果是，用户有两种方法将饼干从桶中取出

拨弄

jQuery

    /*

    Biscuit Slector v1.0

    */


    $(function() { //Add classes to elements

        $('.biscuit').click(function(){
            $(this).toggleClass( "selected"); //Show biscuit as selected
        });

        $('.biscuit.request').click(function(){
            $('.form .request').toggleClass( "show"); //Toggle show and hide special request form when request buscuit is clicked
        });

    });

    var barrel_items = []; //Array of biscuits in barrel
    var barrel = barrel_items; //Set barrel to equal the contents of the array

    $('[data-biscuit]').click(function(){
        var biscuit = $(this).data('biscuit'); // Set Biscuit variable to equal that of biscuit button clicked
        add_to_barrel(biscuit); //Call function that adds biscuit to barrel array
        $("#barrel").val(barrel); //Add biscuit to barrel hidden input
    });


    function add_to_barrel(item){ //Adds biscuit to barrel

        var name = '';
        switch(item){
            case 'custardcream':
                name = 'Custard Creams';
                break;
            case 'jammydodger':
                name = 'Jammy Dodgers';
                break;
            case 'bourbon':
                name = 'Bourbons';
                break;
            case 'nice':
                name = 'Nice';
                break;
            case 'chocolatedigestive':
                name = 'Chocolate Digestives';
                break;
            case 'digestive':
                name = 'Digestives';
                break;
            case 'fruitshortcake':
                name = 'Fruit Shortcakes';
                break;
            case 'gingernut':
                name = 'Gingernuts';
                break;
            case 'oreo':
                name = 'Oreo';
                break;
            case 'hobnob':
                name = 'Hobnobs';
                break;
            case 'cookie':
                name = 'Cookies';
                break;
        }

        // If item is already there in array, it's index will be returned,
        // otherwise indexOf() will return -1
        var indexOfItem = barrel_items.indexOf(item);
        if(indexOfItem !== -1)
        {
            $('.barrel .chosen').eq(indexOfItem).remove();
            barrel_items.splice(indexOfItem,1);
        }
        else
        {
            $('.barrel').append('<div class="chosen">' + name + '</div>');
            //$('.barrel').append("<button type='button' data-biscuit-remove='" + item + "'>"+ name + " Remove</button>");
            barrel_items.push(item);
            //alert(barrel);

        }

        if ( barrel.length ) { // Show barrel if barrel contains items
            $('.form').addClass( "show");
            //$('.empty').removeClass( "show");
            //$( '.empty' ).text( '' );
            //$('.empty').addClass( "hide");
        } else if (!barrel.length) {
            $('.form').removeClass( "show");
            //$( '.empty' ).text( 'Barrel empty' );
            //$('.empty').addClass( "hide");
        }

    }

/*
饼干Slector v1.0
*/
$（function（）{//向元素添加类
$（'.biscuit'）。单击（函数（）{
$（this）.toggleClass（“选定”）；//显示选定的饼干
});
$（'.bizzie.request'）。单击（函数（）{
$（'.form.request'）.toggleClass（“show”）；//在单击请求总线时切换显示和隐藏特殊请求表单
});
});
var桶_项目=[]//桶装饼干
var barrel=桶装物品//将桶设置为与数组内容相等
$（“[数据饼干]”）。单击（函数（）{
var bizzie=$（this）.data（'bizzie'）；//将bizzie变量设置为与单击的bizzie按钮的变量相等
将_添加到_桶（饼干）；//调用将饼干添加到桶数组的函数
$（“#桶”）.val（桶）；//将饼干添加到桶隐藏输入
});
函数add_to_barrel（item）{//将饼干添加到桶中
变量名=“”；
开关（项目）{
“奶油冻”一案：
名称=‘奶油冻’；
打破
“杰米道奇”案：
name=‘杰米道奇’；
打破
波旁威士忌：
姓名=‘波旁家族’；
打破
案例“不错”：
name=‘不错’；
打破
“巧克力”一案：
名称=‘巧克力消化液’；
打破
“消化性”病例：
名称=‘消化液’；
打破
“水果蛋糕”案例：
名称=‘水果酥饼’；
打破
“金格尔努特”案：
名称='Gingernuts'；
打破
“奥利奥”一案：
名称=‘奥利奥’；
打破
“hobnob”案：
名称='Hobnobs'；
打破
案例“cookie”：
名称=‘Cookies’；
打破
}
//如果该项已存在于数组中，则将返回其索引，
//否则indexOf（）将返回-1
var indexOfItem=桶内项目。indexOf（项目）；
如果（indexOfItem！=-1）
{
$（'.barrel.selected'）.eq（indexOfItem.remove（）；
筒体拼接（indexOfItem，1）；
}
其他的
{
$（'.barrel'）。追加（''+name+''）；
//$（'.barrel'）。追加（“+name+”Remove”）；
桶装物品。推动（物品）；
//警报（桶）；
}
if（barrel.length）{//如果桶包含项目，则显示桶
$（'.form'）.addClass（“show”）；
//$（'.empty'）.removeClass（“show”）；
//$（'.empty'）。文本（''）；
//$（'.empty'）.addClass（“隐藏”）；
}否则，如果（！桶长）{
$（'.form'）.removeClass（“show”）；
//$（'.empty'）.text（'Barrel empty'）；
//$（'.empty'）.addClass（“隐藏”）；
}
}

html

            <div class="form">

                <form id="f_contact" name="f_contact" method="post" action="thanks.php">

                    <h3>Your barrel contains the following biscuits...</h3>

                    <div class="clearfix"><div class="barrel clearfix"><span class="empty">Barrel empty</span></div></div>

                    <div class="request">

                        <p>Please add your special order of biscuits in the box below...</p>
                        <textarea name="request" cols=40 rows=6></textarea>

                    </div>
                    <input type="hidden" id="name" name="name" value="<? echo $name; ?>" />
                    <input type="hidden" id="barrel" name="barrel" value="" />
                    <input type="submit" id="submit" name="submit" value="Place Order" class="button clearfix" />

                </form>

            </div>

            <ul class="cbp-rfgrid biscuits clearfix">

                <li><button type="button" data-biscuit="custardcream" class="biscuit custardcream" ontouchend="this.onclick=fix">Custard Creams</button></li>
                <li><button type="button" data-biscuit="bourbon" class="biscuit bourbon">Bourbon</button></li>     
                <li><button type="button" data-biscuit="nice" class="biscuit nice">Nice</button></li>   
                <li><button type="button" data-biscuit="jammydodger" class="biscuit jammydodger">Jammy Dodger</button></li> 
                <li><button type="button" data-biscuit="cookie" class="biscuit cookie">Cookie</button></li> 
                <li><button type="button" data-biscuit="chocolatedigestive" class="biscuit chocolatedigestive">Chocolate Digestive</button></li> 
                <li><button type="button" data-biscuit="digestive" class="biscuit digestive">Digestive</button></li> 
                <li><button type="button" data-biscuit="fruitshortcake" class="biscuit fruitshortcake">Fruit Shortcake</button></li> 
                <li><button type="button" data-biscuit="gingernut" class="biscuit gingernut">Gingernut</button></li> 
                <li><button type="button" data-biscuit="oreo" class="biscuit oreo">Oreo</button></li> 
                <li><button type="button" data-biscuit="hobnob" class="biscuit hobnob">Hobnob</button></li> 
                <li><button type="button" data-biscuit="request" class="biscuit request">Request another biscuit?</button></li> 

            </ul>

你的桶里有以下饼干。。。
空桶
请在下面的方框中添加您特别订购的饼干

我会像这样做，在
.selected
div上添加一个
数据cookiename
属性，这样您就可以在
barrel\u items
数组中找到cookie，并将其从数组中移除。将事件绑定到单击桶项目的操作如下：

$(".barrel").on("click", ".chosen", function() {
    var biscuitName = $(this).data("biscuitname");

    var indexOfItem = barrel_items.indexOf(biscuitName);
    barrel_items.splice(indexOfItem,1);
    $(this).remove();
    $(".biscuits [data-biscuit='" + biscuitName + "']").removeClass("selected");
});

请注意，当使用

绑定上的

.on时，事件将自动附加到添加到
.barrel
元素的所有新的
.selected
元素。
这非常适合我的要求，但我刚刚意识到饼干按钮本身有一个类被添加，以显示它已被选中。我已经更新了小提琴，以证明它看起来很酷。我将编辑我的解决方案，以反映这一变化以及-你可以看到它，包括你的编辑在。完美，谢谢：）必须爱stackoverflow！