2016-03-16 7 views
1

Я не так в JavaScript \ JQuery и у меня есть следующие сомнения, о том, как справиться со следующей ситуацией в скрипте JQuery, который реализует меню, здесь ссылку JSFiddle, чтобы увидеть весь ходовой код:Как получить текст внутри элемента span с определенным классом, который находится внутри объекта с кликом, используя JQuery?

https://jsfiddle.net/AndreaNobili/s8wos4n2/

Итак, как вы можете видеть в предыдущем JSFiddle, у меня есть следующая ситуация.

в HTML-коде есть вкладки меню, которые реализуются <li> закладками что-то вроде этого:

<li class="com__nav-item"> 
    <a href="" class="com__nav-link centered"> 
     <span class="blue-line animate scaleIn delay-3 menuVoiceTitle">FUNCTION 1</span> 
     <span class="white-circle animate scaleIn delay-5"></span> 
    </a> 
</li> 

Итак, как вы можете видеть каждую вкладку <li> реализацию пункта меню содержит <span>, которые показывают меню (например, ФУНКЦИЯ 1 в этом примере).

Все эти <span> установили класс CSS menuVoiceTitle.

Хорошо, когда пользователь нажимает на пункт меню она выполняется функция JavaScript switchTab() и здесь я имею p переменную:

var p = $(this).parent('li'); 

Я думаю, что это ссылка на <li> на щелкнули ссылку (или что-то вроде этого).

Так что теперь у меня есть ссылка в <li> элементе, представляющем щелкнул пункт меню, и теперь я хочу, чтобы получить текст внутри <span> элемента, имеющих menuVoiceTitle класса CSS внутри этого <li> элемента.

Как я могу правильно реализовать это поведение с помощью jQuery?

ответ

1

Просто:

$('.com__nav-item').click(function(){ 
    var targettext = $(this).find('span.menuVoiceTitle').text(); 
    alert(targettext); 
}); 

jsFiddle

+0

Я попытался интегрироваться в свой оригинальный JSFiddle, но кажется, что он не работает, почему? – AndreaNobili

+0

Решенный сам, функция .click() не должна определяться в классе com__nav-item, но в классе com__nav-link – AndreaNobili

+0

Так что лучше, ваша проблема решена. – Pedram

0
var p = $(this).parent('li'); 

Эта линия выберите родительский литий означает текущий "Ли тег" вы щелкнули прямо сейчас.

targetText = p.find('.menuVoiceTitle').html(); 

Теперь, используйте эту строку сразу после «var p = $ (this) .parent ('li');" и вам понадобится текст.

Примечание: - находка() функция JQuery, который пытаются найти элемент с помощью селектора (идентификатор, класс, имя тега) внутри элемента.

 Смежные вопросы

  • Нет связанных вопросов^_^