JQuery OnClick Добавить/Удалить класс дочернего элемента

Question

Здесь есть HTML:

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

Когда «значок» щелкают мне это нужно, чтобы удалить класс элемента диапазона, а затем добавить еще один класс.

Вот что у меня есть, но он не работает:

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

Попробуйте это:

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

find() будет выглядеть жгуты элемента и найти, в этом случае, ребенок из <a> тега, который является <span>.

Обратите внимание, как вы также можете связать removeClass и addClass, поскольку каждый возвращает те же самые элементы, которые были переданы.

Answer 3

Согласно documentation

Описание: Для каждого элемента в наборе, получить первый элемент, соответствующий селектор путем тестирования элемента себя и проходя через его предков в дереве DOM.

закрывает находит своего предка. Вы должны использовать .find() вместо

попробовать

$(this).find('span') 

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

« ближайший »метод 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/