点击后替换图标元素

Question

I have this script in 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) {});
});

This code adds and removes items from my database (script post to PHP / Laravel).

I have a span to remove an item:

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

And to add an item:

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

ID numbers vary depending on the product.

I would like to click on "removeItem" (minus icon) to add "addItem" (plus icon).

After clicking on "addItem" (plus icon) there would appear an element for "removeItem" (minus icon).

So if I clicked add element - then we replace the icon n and delete the element and vice versa. So if I click the icon to delete the item - it should appear for adding.

In my code I have two methods to add and delete. I know they can't be at the same time. I just don't know how to assign them to individual buttons.

Answer 1

Change your onclick event like below:

 $('.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>

You need to assign this to a variable on the click function

var element = this;

After a service response, call the below function and pass element as the argument:

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

Since you claimed to be a new web developer, I'd happy to post an alternative approach. It's based on the checkbox state + showing a correct icon.

Working example: https://codepen.io/zvona/pen/qBbrLag?editors=1111

The HTML looks like this (no fontawesome in this case, but you can replace those with the correct icons):

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

The idea is to use CSS for displaying the correct icon based whether a checkbox is checked or not (see the CodePen for detailed CSS).

Now, based on the state of the checkbox, we make a query with JavaScript to a correct endpoint:

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

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

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

I hope this doesn't confuse you, but to give idea(s) on how you can approach your problem.