jQuery Toggle 在同一个按钮上添加/删除到列表

Question

我正在尝试使用相同的按钮创建一种切换/添加和删除。目前我可以将选择添加到列表中，但希望能够在添加后按相同的按钮将其从列表中删除。

我创建了一个小提琴来展示我当前正在进行的工作......

小提琴http://jsfiddle.net/amesy/vtg6nnce/2/

HTML...

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

                <li><button type="button" data-biscuit="custardcream" class="biscuit custardcream"><img src="img/custardcream.png" /><div class="overlay"><div class="name">Custard Creams</div><img src="img/bite.png" class="bite" /></div></button></li>

                <li><button type="button" data-biscuit="jammydodger" class="biscuit jammydodger"><img src="img/jammydodger.png" /><div class="overlay"><div class="name">Jammy Dodger</div><img src="img/bite.png" class="bite" /></div></button></li> 

                <li><button type="button" data-biscuit="hobnob" class="biscuit hobnob"><img src="img/hobnob.png" /><div class="overlay"><div class="name">Hobnob</div><img src="img/bite.png" class="bite" /></div></button></li> 

            </ul>

            <div class="barrel"></div> //Basket List / Biscuit Barrel

jQuery...

$(function() {

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

});


var barrel_items = [];

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



function add_to_barrel(item){
if($.inArray(item, barrel_items) !== -1){
    return;
}
var name = '';
switch(item){
    case 'custardcream':
        name = 'Custard Creams';
        break;
    case 'hobnob':
        name = 'Hobnob';
        break;
    case 'jammydodger':
        name = 'Jammy Dodgers';
        break;
}
$('.barrel').append('<div class="chosen">' + name + '</div>');
barrel_items.push(item);
}

Answer 1

由于barrel_items 数组中的元素映射到Basket List 中的元素，您可以从数组中获取元素的索引，并使用它从DOM 结构中删除相应的元素。

JS：

$(function () {

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

});

var barrel_items = [];

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

function add_to_barrel(item) {

    var name = '';
    switch (item) {
        case 'custardcream':
            name = 'Custard Creams';
            break;
        case 'hobnob':
            name = 'Hobnob';
            break;
        case 'jammydodger':
            name = 'Jammy Dodgers';
            break;
    }

    // If item is already there in array, it's index will be returned,
    // otherwise inArray() will return -1    
    var indexOfItem = $.inArray(item, barrel_items);

    if (indexOfItem !== -1) {
        $('.barrel .chosen').eq(indexOfItem).remove();
        barrel_items.splice(indexOfItem, 1);
    }
    else {
        $('.barrel').append('<div class="chosen">' + name + '</div>');
        barrel_items.push(item);
    }
}

JSFiddle：http://jsfiddle.net/vtg6nnce/12/

Answer 2

为您的按钮添加名称属性，例如：

 <li><button type="button" data-biscuit="custardcream" name="Custard Creams" class="biscuit custardcream"><img src="img/custardcream.png" /><div class="overlay"><div class="name">Custard Creams</div><img src="img/bite.png" class="bite" /></div></button></li>

并将 onclick 事件更改为：

$('[data-biscuit]').click(function(){
    var biscuit = $(this).data('biscuit');
    var biscuitName = $(this).attr('name');

    if($('div[name="'+biscuitName+'"]').is(":visible")){
       $('div[name="'+biscuitName+'"]').hide();                                  
    }else{
         $('div[name="'+biscuitName+'"]').show();
    }
    add_to_barrel(biscuit);
});

Fiddle Here

Answer 3

如果你保留一个简单的地图，这会容易得多，它包含名称和状态，因此很容易切换

$(function () {

    var name_map     = {
        'custardcream' : {name : 'Custard Creams', active : false},
        'hobnob'       : {name : 'Hobnob', active : false},
        'jammydodger'  : {name : 'Jammy Dodgers', active : false}
    }

    $('.biscuit').on('click', function () {
        $(this).toggleClass("selected");
        var key     = $(this).data('biscuit');
        var biscuit = name_map[key];

        if ( biscuit.active ) {
            $('.barrel').find('.' + key).remove();
        } else {
            var el = $('<div />', {'class' : 'chosen ' + key, text : biscuit.name});
            $('.barrel').append(el);
        }

        biscuit.active = !biscuit.active; 
    });

});

FIDDLE