时间戳

首页 > 解决方案 > 点击后替换图标元素

javascript - 点击后替换图标元素

问题描述

我在 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 并删除元素，反之亦然。因此，如果我单击该图标以删除该项目-它应该会出现以供添加。

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

标签： javascriptjquery

解决方案

更改您的 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');
  }
}

推荐阅读