Question

我在两栏中显示记录。我需要执行常见操作（例如删除）根据div的选择。如果用户选择div ids participant_1，participant_4，参与者_6 然后我需要获得这三个ID。有没有办法在JQuery中实现这一点。如果用户一起选择了三个ID，那么我想删除它in one time not one by one。任何帮助将不胜感激。

    <div class="left_column">
        <div class="record_row" id="participant_1"> 
        ----
        ----
        </div>
        <div class="record_row" id="participant_3"> 
        ----
        ----
        </div>
        <div class="record_row" id="participant_5"> 
        ----
        ----
        </div>
    </div>
    <div class="right_column">
        <div class="record_row" id="participant_2"> 
        ----
        ----
        </div>
        <div class="record_row" id="participant_4"> 
        ----
        ----
        </div>
        <div class="record_row" id="participant_6"> 
        ----
        ----
        </div>
    </div>

Answer 1

您可以将click事件与类选择器绑定，并使用this.id获取当前元素。 this是源对象。

<强> Live Demo

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

$('#btn').click(function () {
    $('.selected').each(function(){
        alert(this.id);
    });
});

Answer 2

以下是您的问题的解决方案： -

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

我已添加按钮以获取所有ID

 var ids = new Array();
    $('#btn').click(function () {

    var selected_activities =$('.selected');
    var ids = new Array();
    selected_activities.each(function(){
          var id_str   =  $(this).attr("id");
          var id_arr      =  id_str.split("_");
          var selval       =  id_arr[1];
        if(selval!='undefined' && selval!='' && selval!=null){
            ids.push(selval);
        }
    });
    alert(ids);
});

在此处查看演示Live Demo Code

Answer 3

如果用户一起选择了三个ID，那么我想一次删除它而不是一个一个

是的，添加课程selected：

var css_class = '.record_row';
$(css_class).click(function(){
    $(this).addClass('selected');

    if ($('.selected').length == 3) 
      // delete 

    // to get all three ids
    var listID = $.map($('.selected'), function(elem){ return $(elem).attr('id') });
});

Answer 4

您可以将onclick事件绑定到每个div

<div class="record_row" id="participant_1" onclick="doyoursutff(this.id);">

或者您可以将事件绑定为

$('.left_column').find('div').click(function(){
do your stuff...
})

$('.right_column').find('div').click(function(){
    do your stuff...
    })

或只是这样做

$('.record_row').click(function(){
           do your stuff here ...
})

在jquery中获取多个div选择值

4 个答案: