发送由 onClick 函数触发的特定元素答案

【问题标题】：send that specific element which is triggered by onClick function发送由 onClick 函数触发的特定元素
【发布时间】：2014-06-21 12:52:05
【问题描述】：

这是我的 HTML：

<li class="custom-bottom-list">
    <a onClick="upvote(this)"><i class="fa fa-thumbs-o-up"></i><span>upvote</span></a>
</li>

我的 javascript 函数支持投票：

function upvote(el){
    $(el+' i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');
    console.log( event );
}

基本上，我想选择并更改被点击的特定元素内的“i”标签的 css。它现在所做的是更改页面中所有“i”标签的 css。
有人能告诉我一个有效的方法吗？

PS - 我试过 onClick="upvote(event) 和 $(event.target).removeClass('fa-thu..
但这仅在我单击“i”标签时才有效。当我单击 span 标签时，它会更改 span 的 css！

【问题讨论】：

【解决方案1】：

你不能像这样把不同的选择器粘在一起。

el不包含字符串选择器，所以需要使用jQuery库来遍历i元素。

如果你是console.log(el)，你会明白为什么选择器不起作用。

使用.find:

$(el).find('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');

另一种方法（虽然速度较慢，并且由于只在 DOM 中遍历一层而受到更多限制）：

$(el).children('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');

而且，正如@newboyhun 指出的那样，另一种方法是将context 提供给选择器：

$('i', el).removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');

【讨论】：

【解决方案2】：

使用find() 获取孩子

$(el).find('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');

或者你可以使用下面的类找到孩子

$('.fa-thumbs-o-up',el).removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');

你也可以试试children()

$(el).children('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');

【讨论】：

我认为您的第二个选项（子类）有缺陷。不能像那样将选择器粘合在一起......
有什么更好的？查找（'i'）或孩子（'i'）？
@jackkorbin - 实际上，.children 是。看到这个问题/答案：stackoverflow.com/questions/2384793/…
在这种情况下，我认为 find wud 会更好，因为你永远不知道你将来会增加多少级别。没有？
@jackkorbin 那种事情真的是一个判断电话。在您的情况下，如果您认为级别可能会增加，并且您仍然希望保持相同的行为，那么find() 是更好的选择。如果您认为新的i 可能会添加到不会使用相同行为的不同级别，请使用children()。如果/当出现这种情况时，根据需要进行修改在任何一种情况下都不是什么大不了的事。如有疑问，我通常会选择更具体的选项：在这种情况下为children。

【解决方案3】：

$(el).find('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');

【讨论】：

【解决方案4】：

你可以试试这个

如果你想自定义 CSS

$(el).find('i').css({'color' : 'black'});

如果要添加或删除类

$(el).find('i').removeClass('fa-thumbs-o-up').addClass("fa-spin");

【讨论】：