jQuery onclick 添加/删除子元素的类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18645073/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery onclick Add/Remove class of child element
提问by James Wilson
Here is the HTML:
这是 HTML：
<a id="docLocked" title="Unlock this document" style="text-decoration: none; cursor: pointer;"><span class="iconfa-lock"></span></a>
When the 'icon' is clicked I need it to remove the class of the span element and then add another class.
单击“图标”时，我需要它删除 span 元素的类，然后添加另一个类。
Here is what I have but it is not working:
这是我所拥有的，但它不起作用：
jQuery('#docLocked').click(function () {
jQuery(this).closest('span').removeClass('iconfa-lock');
jQuery(this).closest('span').addClass('iconfa-unlock');
});
What am I doing wrong here?
我在这里做错了什么？
回答by David says reinstate Monica
Why not keep it simple:
为什么不保持简单：
$('#docLocked').click(function(e){
e.preventDefault();
$(this).find('span').toggleClass('iconfa-lock iconfa-unlock');
});
References:
参考：
回答by aarryy
According to documentation
根据文档
Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
描述：对于集合中的每个元素，通过测试元素本身并在 DOM 树中向上遍历其祖先来获取与选择器匹配的第一个元素。
closes finds ancestor. You should use .find() instead
关闭找到祖先。你应该使用 .find() 代替
try
尝试
$(this).find('span')
回答by Lee Meador
Try this:
尝试这个：
jQuery('#docLocked').click(function () {
jQuery(this).find('span').removeClass('iconfa-lock').addClass('iconfa-unlock');
});
find()will look withing the element and find the, in this case, child of the <a>tag that is a <span>.
find()将查看元素并找到，在这种情况下，<a>标签的子元素是 a <span>。
Notice how you can also chain the removeClass and the addClass since each returns the same elements it was passed.
请注意您还可以如何链接 removeClass 和 addClass，因为每个都返回它传递的相同元素。
回答by Krzysiek
jQuery('#docLocked').click(function () {
jQuery(this).find('span').removeClass('iconfa-lock').addClass('iconfa-unlock');
});
回答by Charaf JRA
Try this solution , find()is what your are looking for :
试试这个解决方案，find()就是你正在寻找的：
jQuery('#docLocked').click(function () {
jQuery(this).find('span').removeClass('iconfa-lock').addClass('iconfa-unlock');;
});
Or using .children():
或使用.children()：
jQuery('#docLocked').click(function () {
jQuery(this).children()[0].removeClass('iconfa-lock').addClass('iconfa-unlock');;
});
回答by Holt
The ? closest ? jQuery method progress up the DOM tree, if you want to find a child, you have to use the ? children ? or the ? find ? method.
这 ？最接近？jQuery 方法在 DOM 树上向上推进，如果你想找到一个孩子，你必须使用 ? 孩子们 ？或者 ？找 ？方法。
回答by Marquee
回答by Brajesh Kumar
Try using findin place of closest
尝试使用find代替最近的
回答by melancia
If you have the hreflinking to a different page - which makes no sense here, as you wouldn't notice any class change - it won't work, so you should prevent the default behavior before doing anything else.
Also, you need to change the selector, because .closest()will look for a sibling, not a child.
如果您有href指向不同页面的链接 - 这在此处没有意义，因为您不会注意到任何类更改 - 它不会起作用，因此您应该在做任何其他事情之前阻止默认行为。此外，您需要更改选择器，因为.closest()将寻找兄弟姐妹，而不是孩子。
jQuery('#docLocked').on('click', function (e) {
// Stop the default behavior
e.preventDefault();
// Save the href value to be used after (if you need to)
var href = $(this).attr('href');
// Select a span which is within the clicked anchor
jQuery('span', this).toggleClass('iconfa-lock').toggleClass('iconfa-unlock');
// Doesn't work on jsFiddle
// if (href != "")
//window.location.href = href;
});
Working demo: http://jsfiddle.net/GLEc2/
工作演示：http: //jsfiddle.net/GLEc2/
