一次单击即可在数组中添加多个值的JavaScript_Javascript_Jquery

一次单击即可在数组中添加多个值的JavaScript

javascript jquery

一次单击即可在数组中添加多个值的JavaScript,javascript,jquery,Javascript,Jquery,这是我的HTML代码： <table id="datatable-buttons" class="table table-bordered" style="overflow: hidden;"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th&g

这是我的HTML代码：

<table id="datatable-buttons" class="table table-bordered" style="overflow: hidden;">
    <thead>
      <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
      </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
      <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
      </tr>
    </tfoot>

这是我的JQuery代码：

$(document).on('click', '#datatable-buttons tbody tr', function()
        {
            if ($(this).hasClass('bg-info'))
                {
                  counter--;
                  if(counter == 0)
                    {
                        $("#actions").html("");
                    }
                  else if(counter == 1)
                    {
                        var val1 = $(this).closest("tr").children(":first").text();
                        var idx = $.inArray(val1, dataId);
                        if (idx == -1)
                            {
                                dataId.push(val1);
                            }
                        else
                            {
                                dataId.splice(idx, 1);
                            }
                        console.log(dataId);
                        $("#actions").html("<button class='btn btn-primary'><i class='glyphicon glyphicon-eye-open'></i></button>&nbsp;&nbsp;<button class='btn btn-warning'><i class='glyphicon glyphicon-edit'></i></button>&nbsp;&nbsp;<button class='btn btn-danger'><i class='glyphicon glyphicon-trash'></i></button>");
                    }
                  else if(counter > 1)
                    {
                        var val1 = $(this).closest("tr").children(":first").text();
                        var idx = $.inArray(val1, dataId);
                        if (idx == -1)
                            {
                                dataId.push(val1);
                            }
                        else
                            {
                                dataId.splice(idx, 1);
                            }
                        console.log(dataId);
                        $("#actions").html("<button class='btn btn-danger'><i class='glyphicon glyphicon-trash'></i></button>");
                    }

                  $(this).removeClass('bg-info');
                }
            else
                {
                  counter++;
                  if(counter == 0)
                    {
                        $("#actions").html("");
                    }
                  else if(counter == 1)
                    {
                        var val1 = $(this).closest("tr").children(":first").text();
                        var idx = $.inArray(val1, dataId);
                        if (idx == -1)
                            {
                                dataId.push(val1);
                            }
                        else
                            {
                                dataId.splice(idx, 1);
                            }
                        console.log(dataId);                            
                        $("#actions").html("<button class='btn btn-primary'><i class='glyphicon glyphicon-eye-open'></i></button>&nbsp;&nbsp;<button class='btn btn-warning'><i class='glyphicon glyphicon-edit'></i></button>&nbsp;&nbsp;<button class='btn btn-danger'><i class='glyphicon glyphicon-trash'></i></button>");
                    }
                  else if(counter > 1)
                    {
                        var val1 = $(this).closest("tr").children(":first").text();
                        var idx = $.inArray(val1, dataId);
                        if (idx == -1)
                            {
                                dataId.push(val1);
                            }
                        else
                            {
                                dataId.splice(idx, 1);
                            }
                        console.log(dataId);
                        $("#actions").html("<button class='btn btn-danger'><i class='glyphicon glyphicon-trash'></i></button>");
                    }
                  else
                    {
                        // 
                    }
                    $(this).addClass('bg-info');
                    console.log(dataId);
                } 
        });

        // $(document).on('click', '#datatable-buttons tbody tr td i.glyphicon.glyphicon-edit.edit', function()
        //  {
        //      var specificValue = $(this).closest("tr").children(":first").text();
        //      alert("Edit Clicked For " + specificValue);
        //  });

        // $(document).on('click', '#datatable-buttons tbody tr td i.glyphicon.glyphicon-trash.delete', function()
        //  {
        //    $(this).closest("tr").remove().slideUp("slow");
        //  });

$（document）.on（'click'，'#datatable buttons tbody tr'，function（）
{
if（$（this）.hasClass（'bg-info'））
{
计数器--；
如果（计数器==0）
{
$（“#操作”）.html（“”）；
}
else if（计数器==1）
{
var val1=$（this.closest（“tr”）.children（“：first”）.text（）；
var idx=$.inArray（val1，dataId）；
如果（idx==-1）
{
数据id.push（val1）；
}
其他的
{
数据标识拼接（idx，1）；
}
console.log（dataId）；
$（“#操作”）.html（“”）；
}
否则，如果（计数器>1）
{
var val1=$（this.closest（“tr”）.children（“：first”）.text（）；
var idx=$.inArray（val1，dataId）；
如果（idx==-1）
{
数据id.push（val1）；
}
其他的
{
数据标识拼接（idx，1）；
}
console.log（dataId）；
$（“#操作”）.html（“”）；
}
$（this.removeClass（'bg-info'）；
}
其他的
{
计数器++；
如果（计数器==0）
{
$（“#操作”）.html（“”）；
}
else if（计数器==1）
{
var val1=$（this.closest（“tr”）.children（“：first”）.text（）；
var idx=$.inArray（val1，dataId）；
如果（idx==-1）
{
数据id.push（val1）；
}
其他的
{
数据标识拼接（idx，1）；
}
console.log（dataId）；
$（“#操作”）.html（“”）；
}
否则，如果（计数器>1）
{
var val1=$（this.closest（“tr”）.children（“：first”）.text（）；
var idx=$.inArray（val1，dataId）；
如果（idx==-1）
{
数据id.push（val1）；
}
其他的
{
数据标识拼接（idx，1）；
}
console.log（dataId）；
$（“#操作”）.html（“”）；
}
其他的
{
// 
}
$（this.addClass（'bg-info'）；
console.log（dataId）；
} 
});
//$（文档）.on（'单击'，'#数据表按钮tbody tr td i.glyphicon.glyphicon edit.edit'，函数（）
//  {
//var specificValue=$（this.closest（“tr”）.children（“：first”）.text（）；
//警报（“为“+specificValue”单击编辑）；
//  });
//$（文档）.on（'单击'，'#数据表按钮tbody tr td i.glyphicon.glyphicon trash.delete'，函数（）
//  {
//$（this）.closest（“tr”）.remove（）.slideUp（“slow”）；
//  });

我想实现的是，我已经创建了一个数组

dataId

，我想在其中推送单击的当前行的值，然后在再次单击行之后，我想检查值是否存在。如果值存在，则从数组中删除该元素，如果不存在，则添加该元素

目前，我已经实现了一个代码，但每当我单击一行时，它会添加两次值

代码可能有什么问题。谢谢你的帮助_/_

创建一个可以重现问题的工作演示。请注意，大多数重复的代码都可以很容易地还原。var dataId=[]？全局计数器的含义是什么？注意：你有很多重复的代码。你确定你在val1中得到了正确的价值吗？

$(document).on('click', '#datatable-buttons tbody tr', function()
        {
            if ($(this).hasClass('bg-info'))
                {
                  counter--;
                  if(counter == 0)
                    {
                        $("#actions").html("");
                    }
                  else if(counter == 1)
                    {
                        var val1 = $(this).closest("tr").children(":first").text();
                        var idx = $.inArray(val1, dataId);
                        if (idx == -1)
                            {
                                dataId.push(val1);
                            }
                        else
                            {
                                dataId.splice(idx, 1);
                            }
                        console.log(dataId);
                        $("#actions").html("<button class='btn btn-primary'><i class='glyphicon glyphicon-eye-open'></i></button>&nbsp;&nbsp;<button class='btn btn-warning'><i class='glyphicon glyphicon-edit'></i></button>&nbsp;&nbsp;<button class='btn btn-danger'><i class='glyphicon glyphicon-trash'></i></button>");
                    }
                  else if(counter > 1)
                    {
                        var val1 = $(this).closest("tr").children(":first").text();
                        var idx = $.inArray(val1, dataId);
                        if (idx == -1)
                            {
                                dataId.push(val1);
                            }
                        else
                            {
                                dataId.splice(idx, 1);
                            }
                        console.log(dataId);
                        $("#actions").html("<button class='btn btn-danger'><i class='glyphicon glyphicon-trash'></i></button>");
                    }

                  $(this).removeClass('bg-info');
                }
            else
                {
                  counter++;
                  if(counter == 0)
                    {
                        $("#actions").html("");
                    }
                  else if(counter == 1)
                    {
                        var val1 = $(this).closest("tr").children(":first").text();
                        var idx = $.inArray(val1, dataId);
                        if (idx == -1)
                            {
                                dataId.push(val1);
                            }
                        else
                            {
                                dataId.splice(idx, 1);
                            }
                        console.log(dataId);                            
                        $("#actions").html("<button class='btn btn-primary'><i class='glyphicon glyphicon-eye-open'></i></button>&nbsp;&nbsp;<button class='btn btn-warning'><i class='glyphicon glyphicon-edit'></i></button>&nbsp;&nbsp;<button class='btn btn-danger'><i class='glyphicon glyphicon-trash'></i></button>");
                    }
                  else if(counter > 1)
                    {
                        var val1 = $(this).closest("tr").children(":first").text();
                        var idx = $.inArray(val1, dataId);
                        if (idx == -1)
                            {
                                dataId.push(val1);
                            }
                        else
                            {
                                dataId.splice(idx, 1);
                            }
                        console.log(dataId);
                        $("#actions").html("<button class='btn btn-danger'><i class='glyphicon glyphicon-trash'></i></button>");
                    }
                  else
                    {
                        // 
                    }
                    $(this).addClass('bg-info');
                    console.log(dataId);
                } 
        });

        // $(document).on('click', '#datatable-buttons tbody tr td i.glyphicon.glyphicon-edit.edit', function()
        //  {
        //      var specificValue = $(this).closest("tr").children(":first").text();
        //      alert("Edit Clicked For " + specificValue);
        //  });

        // $(document).on('click', '#datatable-buttons tbody tr td i.glyphicon.glyphicon-trash.delete', function()
        //  {
        //    $(this).closest("tr").remove().slideUp("slow");
        //  });