Question

我在jQuery中有此脚本：

$('.data-table').on('click', 'td', function () {
      var row = table.row(this).data();
      let mainProduct = {{ $id }};
      $.get("{{ route('related.product.add')}}" + '/' + mainProduct + '/' + row.id, function (data, status) {});
      $.get("{{ route('related.product.destroyAjax') }}" + '/' + mainProduct + '/' + row.id, function (data, status) {});
});

此代码从我的数据库中添加和删除项目（脚本发布到PHP / Laravel）。

我有一个跨度要删除一个项目：

<i id="1" class="fas fa-minus removeItem"></I>

并添加一个项目：

<i id="1" class="fas fa-plus addItem"></I>

ID号因产品而异。

我想单击“ removeItem”（减号）以添加“ addItem”（加号）。

点击“ addItem”（加号）后，将出现“ removeItem”（减号）元素。

因此，如果我单击添加元素-那么我们替换图标n并删除该元素，反之亦然。因此，如果我单击该图标删除该项目，则该项目应显示为要添加。

在我的代码中，我有两种添加和删除方法。我知道他们不能同时存在。我只是不知道如何将它们分配给各个按钮。

Answer 1

如下更改您的onclick事件：

$('.data-table').on('click', 'td i', function() {
  var rowId = $(this).attr('id');
  let mainProduct = {{ $id }};
  let record = this;
  if ($(record).hasClass('addItem')) {
    $.get("{{ route('related.product.add') }}" + '/' + mainProduct + '/' + rowId, function(data, status) {});
    $(record).addClass('removeItem fa-minus');
    $(record).removeClass('addItem fa-plus');
  } else {
    $.get("{{ route('related.product.destroyAjax') }}" + '/' + mainProduct + '/' + rowId, function(data, status) {});
    $(record).addClass('addItem fa-plus');
    $(record).removeClass('removeItem fa-minus');
  }
  console.log(record);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

您需要在点击功能上将this分配给变量

var element = this;

服务响应后，调用以下函数并传递element作为参数：

function switchState(element) {
  if($(element).hasClass('addItem')) {
    $(element).addClass('removeItem fa-minus');
    $(element).removeClass('addItem fa-plus');
  } else {
    $(element).addClass('addItem fa-plus');
    $(element).removeClass('removeItem fa-minus');
  }
}

Answer 2

由于您声称自己是一名新的Web开发人员，所以我很乐意发布另一种方法。它基于复选框状态+显示正确的图标。

工作示例：https://codepen.io/zvona/pen/qBbrLag?editors=1111

HTML看起来像这样（在这种情况下不是 fontawesome ，但是您可以用正确的图标替换它们）：

<form>
  <input type='checkbox' id='makeQuery' />
  <i class='addItem'>+</i>
  <i class='removeItem'>-</i>
  <span>Some Item Name</span>
</form>

想法是使用CSS根据是否选中复选框来显示正确的图标（有关详细CSS，请参阅CodePen）。

现在，基于复选框的状态，我们使用JavaScript向正确的端点进行查询：

const makeQuery = document.querySelector('#makeQuery');

makeQuery.addEventListener('change', () => {
  const query = (makeQuery.checked) ? '/addItem' : '/removeItem';

  << here you make the query >>
});

我希望这不会使您感到困惑，但请您就如何解决问题提出想法。

单击后替换图标元素

2 个答案: