Как указать классы с помощью JQuery

-2

Я создал простое шоу и скрыть отображение.Как указать классы с помощью JQuery

У меня есть проблема, хотя при дублировании классов.

My toggle работает, но когда я дублирую контейнеры и нажимаю триггер, он показывает все контейнеры не только один.

Я попытался настроить свой код, используя функцию (.), Но не работает. может кто-нибудь покажет мне, где я иду не так?

<!--SHARE--> 
       <a href="#share-trigger" class="share-trigger"><i class="fa fa-share"></i>Share</a> 
       <div class="show-share-box"> 
        <div class="share-this-wrap"> 
        <a href="#" data-toggle="tooltip" class="share-popup share-btn" title="Share on Facebook"> 
         <i class="fa fa-facebook"></i> 
         <div class="meta-share-wrap"> 
         <span class="shot-social-count">4</span> 
         </div> 
        </a> 

        <a href="#" data-toggle="tooltip" class="share-popup share-btn" title="Share on Twitter"> 
         <i class="fa fa-twitter"></i> 
         <div class="meta-share-wrap"> 
         <span class="shot-social-count">6</span> 
         </div> 
        </a> 
        </div> 
       </div><!--end share box-->

Мой код, который работает.

$(".share-trigger").click(function(e){ 
     e.preventDefault(); 
     $(".show-share-box").slideToggle('slow'); 
    })

Мой код, который не работает - здесь я попытался добавить (эту функцию)

$(".share-trigger").click(function(e){ 
     e.preventDefault(); 
     $(this).find('.show-share-box').slideToggle('slow'); 
    })

Благодаря кучу !!

источник

2013-12-17 user2965875

Нам нужно увидеть образец вашего html. –

показать нам ваш визуализированный HTML –

Является ли элемент .show-share-box' элементом '.share-trigger'? – Satpal

Должно быть:

$(this).next('.show-share-box').slideToggle('slow');

источник

2013-12-17 14:48:19

$(this).find('.show-share-box').slideToggle('slow');

$(this) -> относится к текущему элементу, который .share-trigger в вашем случае

$(this).find('.show-share-box') означает найти .show-share-box внутри .share-trigger

ваш код не работает, поскольку нет ни одного элемента .show-share-box внутри .share-trigger

Обновлен после того, как обновлен вопрос с опцией.

.next()

$(this).next('.show-share-box').slideToggle('slow');

источник

2013-12-17 14:43:52

. Какая разница между вашим кодом и кодом OP, который не работает. –

@ patel.milanb проверить ответ еще раз . –

Откуда вы знаете, что «.show-share-box» не выходит, даже не глядя на HTML ... –

Далее будет выбрать все .Show -доля ящик так, используя первый в следующем наборе должны сделать трюк.

$(".share-trigger").click(function(e){ 
    e.preventDefault(); 
    //$(".show-share-box").slideToggle('slow'); 
    $(this).next(".show-share-box").first().slideToggle('slow'); 
})

источник

2013-12-17 15:00:26

проблема вы выбираете <a> элемент как $(this) и нахождение внутри ('.show-share-box'), который сидит за пределами вашего <a>

вы можете использовать .next() или непосредственно использовать class для переключения

Jsfiddle: http://jsfiddle.net/FtgN4/2/

$(".share-trigger").click(function (e) { 
    e.preventDefault(); 
    $('.show-share-box').slideToggle("slow", function() { 
     // animation complete 
    }); 
})

источник

2013-12-17 15:02:56

Как указать классы с помощью JQuery

ответ

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