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

Question

这是我的HTML：

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

我的javascript函数Upvote：

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！

Answer 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');

Answer 2

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

Answer 3

使用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');

Answer 4

你可以试试这个

如果你想自定义CSS

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

如果您想添加或删除Class

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