通过单击篮子中的项目元素从篮子中删除项目

Question

我将饼干添加到桶中然后取出的小项目即将完成。我可以通过单击最初用于添加饼干的原始按钮来移除饼干。但是，我正在努力通过单击桶中包含的添加饼干的元素来从桶中取出饼干。所以我想要达到的最终结果是用户有两种方法可以从桶中取出饼干。

FIDDLE http://jsfiddle.net/amesy/0hthm28y/

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

    }

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>

Answer 1

我会像 this JSFiddle 那样做，我在 .chosen div 上添加 data-biscuitname 属性这样你就可以在barrel_items 数组，并将其从数组中移除。将事件绑定到点击桶项目是这样完成的：

$(".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 元素的所有新 .chosen 元素。

通过单击篮子中的项目元素从篮子中删除项目

Remove item from basket by clicking item element inside the basket

arrays

jquery

splice

array-splice