只需单击一下JavaScript即可删除多个项目

时间:2018-06-25 08:31:20

标签: javascript jquery

我想从购物车中删除商品,但我需要将其删除为多个,因此我创建了一个数组ID,并在用户选中一个复选框时使用push将想要删除的商品ID添加到数组中,这样我就可以处理所有单击按钮的操作,但是当我单击submit时出现错误ids.push不是函数,任何人都可以帮我解决这个问题,甚至可以更好地实现相同的功能。下面是我的代码示例 JS FIDDLE

在下面的小提琴中,当我单击“是”按钮时,我总是会得到1,因此当我选中一个复选框时,我将获得数据ID。

var ids = [];
$(".delCartCheck").click(function() {
  id = $(this).attr('data-id');
  ids = ids.push(id);
});

$('#confirm-delete').on('click', function(e) {
  alert(ids);

  function deletecart(ids) {

    $.ajax({
      url: delUrl,
      type: 'POST',
      data: {
        id: ids
      },
      success: function(data) {
        if (data === 'success') {
          window.location = url + data;
        } else {
          window.location = url + data;
        }
      },
      error: function(jqXHR, errMsg) {
        // handle error
        console.log(errMsg);
      }
    });
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="pull_left checkbox-wrap itemDel" title="delete item">
  <label class="check_container " style="top:40px;">
           <input type="checkbox" class="delCartCheck" data-id="1">
           <span class="checkmark"></span>
      </label>
</div>
<div class="pull_left checkbox-wrap itemDel" title="delete item">
  <label class="check_container " style="top:40px;">
             <input type="checkbox" class="delCartCheck" data-id="2">
             <span class="checkmark"></span>
       </label>
</div>
<div class="pull_left checkbox-wrap itemDel" title="delete item">
  <label class="check_container " style="top:40px;">
          <input type="checkbox" class="delCartCheck" data-id="3">
          <span class="checkmark"></span>
      </label>
</div>

<button type="button" id='confirm-delete'>Yes</button>
<button type="button" class="">No</button>

3 个答案:

答案 0 :(得分:0)

此处ids = ids.push(id)将ids.push()返回的值分配给ids。

public function showSurvey()
    {
        return view ('surveys.survey');   //the laravel blade.. although it's just HTML as per the tutorial example
    }

您正在寻找的是这个

$(".delCartCheck").click(function() {
      id = $(this).attr('data-id');
      ids = ids.push(id);
    });

答案 1 :(得分:0)

因为您已将push方法的返回状态分配给变量ids = ids.push(id);

ids = ids.push(id);这不是返回数组,而是状态为true或false。所以true表示其1。所以ids==1然后id成为普通变量而不是数组。因此对于普通数组,没有push函数。

尝试这样的事情:

var ids = [];
$(".delCartCheck").click(function() {  
  ids = [];
  $(".delCartCheck:checked").each(function(){
    id = $(this).attr('data-id');
    ids.push(id);
  });  
});

https://jsfiddle.net/x7mys0ac/41/

答案 2 :(得分:0)

您可以这样操作:https://jsfiddle.net/x7mys0ac/46/

如果选中此复选框,请数据ID,否则拼接以从数组中删除元素。

var ids = [];
$(".delCartCheck").click(function() {
  if($(this).prop("checked")){
        ids.push($(this).attr('data-id'));
  } else{
       var x = ids.indexOf($(this).attr('data-id'));
       ids.splice(x,1);
   }
  console.log(ids)
});

$('#confirm-delete').on('click', function(e) {
var newArray = ids.filter(function(v){return v!==''});
alert(newArray)
  function deletecart(ids) {

    $.ajax({
      url: delUrl,
      type: 'POST',
      data: {
        id: ids
      },
      success: function(data) {
        if (data === 'success') {
          window.location = url + data;
        } else {
          window.location = url + data;
        }
      },
      error: function(jqXHR, errMsg) {
        // handle error
        console.log(errMsg);
      }
    });
  }

});