Question

这是HTML：

<a id="docLocked" title="Unlock this document" style="text-decoration: none; cursor: pointer;"><span class="iconfa-lock"></span></a>

单击“图标”时，我需要删除span元素的类，然后添加另一个类。

这是我所拥有的，但它不起作用：

jQuery('#docLocked').click(function () {
        jQuery(this).closest('span').removeClass('iconfa-lock');
        jQuery(this).closest('span').addClass('iconfa-unlock');
    });

我在这里做错了什么？

Answer 1

为什么不保持简单：

$('#docLocked').click(function(e){
    e.preventDefault();
    $(this).find('span').toggleClass('iconfa-lock iconfa-unlock');
});

JS Fiddle demo

参考文献：

find()。
toggleClass()。

Answer 2

根据documentation

描述：对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

关闭发现祖先。您应该使用.find（）代替

尝试

$(this).find('span')

Answer 3

试试这个：

jQuery('#docLocked').click(function () {
    jQuery(this).find('span').removeClass('iconfa-lock').addClass('iconfa-unlock');
});

find()会查看该元素，并在此情况下找到<a>标记为<span>的子项。

注意你们如何链接removeClass和addClass，因为每个都返回它们传递的相同元素。

Answer 4

jQuery('#docLocked').click(function () {
        jQuery(this).find('span').removeClass('iconfa-lock').addClass('iconfa-unlock');
    });

Answer 5

尝试此解决方案，find()正是您所寻找的：

jQuery('#docLocked').click(function () {
        jQuery(this).find('span').removeClass('iconfa-lock').addClass('iconfa-unlock');;

    });

或使用.children()：

jQuery('#docLocked').click(function () {
        jQuery(this).children()[0].removeClass('iconfa-lock').addClass('iconfa-unlock');;

    });

Answer 6

«nearest»jQuery方法在DOM树中前进，如果你想找一个孩子，你必须使用«children»或«find»方法。

Answer 7

我制作了一个适用于此的fiddle：

jQuery('#docLocked span').click(function () {
  jQuery(this).removeClass('iconfa-lock').addClass('iconfa-unlock');
});

Answer 8

尝试使用查找代替最近的

Answer 9

如果您将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;
});

工作演示：http://jsfiddle.net/GLEc2/

jQuery onclick添加/删除子元素的类

9 个答案: