Question

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

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

FIDDLE 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

当bucket_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

如果你保留一个简单的地图，那就更容易了，它保存了名称和状态，因此很容易切换

public void login()
{

    Connection conn;
    try {


        conn = DriverManager.getConnection("jdbc:ucanaccess:/database/theDB.accdb");

    Statement s = conn.createStatement();
    ResultSet rs = s.executeQuery("SELECT Student_Number FROM User");


    while (rs.next()) {

        System.out.println(rs.getString(1));
    }



    } catch (SQLException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
}

FIDDLE

jQuery切换在同一按钮上添加/删除列表

3 个答案: