jQuery link with "Begins by" [attribute^='value'] intead of using a class

Question

当前工作流

我们定义可用的操作，然后为其创建内部API。举个简单的例子，假设用户可以在我们的页面中执行Like。因此，当点击（如）时，此页面会触发一个帖子：

/like/add/2573

此外，为了删除它，触发了这个：

/like/remove/2573

因此，看到这一点，我们可以认为锚标签看起来像这样：

<button data-href = "/like/add/2573" class = "like icon-like">Like</button>

我通常会使用类"like"或添加一个类作为"like button"或类似的类，以便能够使用带有简单的jQuery来选择它

$(".like-button").click(function(e){ /*AJAX*/ });

拟议备选方案

与其只为处理程序添加类，而且既然API定义得很好，这不是更可取吗？

$("[data-href^='/like']").click(function(e){ /*AJAX*/ });

注意事项

也许最大的问题是性能。此外，javascript似乎与html耦合得更紧密（在正常情况下恰恰相反，html与js耦合），我不确定它实际上是好是坏。

问题

你能想到由此可能产生的其他问题吗缺点是什么？我将测试这个设置，如果它有性能问题，请将其恢复到原来的方式，但我想知道你的意见，以及是否有人尝试过这样的设置。

Answer 1

当您可以将类.add或.remove应用于any元素时，为什么要使用任何链接，data-id="2573"，并且在Ajax中只添加链接部分

<span class='add' data-id='2573'>Like it</span>

var urlAdd = 'like/add', urlRemove = 'like/remove';
$(document).on('click', '.add, .remove', function(){
    $.ajax({
        url: $(this).hasClass('add') ? urlAdd : urlRemove,
        data: {id: $(this).data('id')},
        /* ... */
    });
});

链接只在一个地方-简单更改网址
用于几乎相同操作的代码重用
切换按钮状态$(this).toggleClass('add').toggleClass('remove') 的简单方法