點擊后替換圖標元素

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>

您需要在單擊 function 時將this分配給變量

var element = this;

服務響應后，調用下面的 function 並將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 開發人員，因此我很樂意發布另一種方法。 它基於復選框 state + 顯示正確的圖標。

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

HTML看起來像這樣（在這種情況下沒有字體，但您可以用正確的圖標替換它們）：

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

這個想法是使用 CSS 根據復選框是否被選中來顯示正確的圖標（有關詳細的 CSS，請參閱 CodePen）。

現在，根據復選框的 state，我們使用 JavaScript 查詢正確的端點：

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

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

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

我希望這不會讓您感到困惑，而是提供有關如何解決問題的想法。