2

这是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');
    });

我在这里做错了什么？

4

9 回答 9

10

Why not keep it simple:

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

JS Fiddle demo.

References:

于 2013-09-05T20:19:50.613 回答
3

根据文档

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

关闭查找祖先。您应该改用 .find()

尝试

$(this).find('span')
于 2013-09-05T20:15:24.827 回答
1

I made a fiddle that works for this:

jQuery('#docLocked span').click(function () {
  jQuery(this).removeClass('iconfa-lock').addClass('iconfa-unlock');
});
于 2013-09-05T20:20:50.817 回答
1

尝试这个：

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

find()将查看元素并找到<a>标记的子元素，在这种情况下，它是 a <span>。

请注意，您还可以如何链接 removeClass 和 addClass，因为每个都返回它传递的相同元素。

于 2013-09-05T20:14:50.433 回答
1 
jQuery('#docLocked').click(function () {
        jQuery(this).find('span').removeClass('iconfa-lock').addClass('iconfa-unlock');
    });
于 2013-09-05T20:16:07.460 回答
1

试试这个解决方案，这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');;

    });
于 2013-09-05T20:16:15.357 回答
1

«最接近的» jQuery 方法沿着 DOM 树向上移动，如果您想找到一个孩子，您必须使用«children» 或« find » 方法。

于 2013-09-05T20:17:46.163 回答
1

尝试使用find代替最近

于 2013-09-05T20:23:13.813 回答
1

如果您有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/

于 2013-09-05T20:24:14.397 回答