[英]Replace icon element after click
我在 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 并删除元素,反之亦然。 因此,如果我单击该图标以删除该项目-它应该会出现以供添加。
在我的代码中,我有两种添加和删除方法。 我知道他们不可能同时出现。 我只是不知道如何将它们分配给单个按钮。
更改您的 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');
}
}
由于您声称自己是新的 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 >>
});
我希望这不会让您感到困惑,而是提供有关如何解决问题的想法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.