jquery on click event, работающий над всеми div с тем же классом

У меня возникли проблемы с событием jquery click и вам нужна помощь.jquery on click event, работающий над всеми div с тем же классом

У меня есть изображение со знаком плюса. Как только пользователь нажимает этот знак плюс, я хочу, чтобы текст фона div исчезал. Текст div имеет крест. Поэтому, когда пользователь нажимает на крест, текст div исчезает, и изображение исчезает. Если вы меня поймаете?

На этой странице есть несколько таких полей, и проблема с моим кодом заключается в том, что он вызывает действие fade на всех div. Не только после того, как вы нажмете.

Вот мой HTML. Их несколько на моей странице, чтобы создать блок портфеля.

<a class="flip-container"> 
    <div class="flip-container"> 
     <div class="flipper"> 
       <div class="front"> 
        <div class="plus"></div> 
         <img src="img/portfolio.jpg" alt="Animation"> 
         <h3>Project name</h3> 
       </div> 
       <div class="back"> 
        <div class="cross"></div> 
        <p>Some text goes here.</p> 
         <p>by persons name</p> 
       </div> 
      </div> 
    </div>

Вот мой JQuery:

$('.back').hide(); 
$('.flip-container .plus').click(function(e){  
    $('.front').fadeOut('slow', function(){ 
     $('.back').fadeIn('slow'); 
    }); 
}); 

$('.flip-container .cross').click(function(e){  
    $('.back').fadeOut('slow', function(){ 
     $('.front').fadeIn('slow'); 
    }); 
});

источник

2013-08-15 user20446

В обработчике кликов 'this' относится к элементу, который был нажат. Начните там, затем используйте функции обхода jQuery, чтобы перейти к определенному элементу, над которым вы хотите действовать. –

Не используйте класс DIV дать DIV вы хотите, чтобы это произошло на ид и изменить JQuery, чтобы соответствовать этому.

источник

2013-08-15 20:26:30 wmfrancia

Мне нужно то же самое действие для всех, но не в одно и то же время. Поэтому добавление идентификатора просто означает, что я добавлю идентификатор в каждый блок портфеля. То же самое произойдет. – user20446

Это не имеет значения, поскольку оно все еще нацелено на каждый идентификатор. HTML создается из Wordpress, поэтому на веб-странице имеется около 4 наборов флип-контейнера. – user20446

Вместо $ ('фронт'), используйте $ (это) .parent()

.front выбирает все передние классы. Это относится к щелканному элементу.

источник

2013-08-15 20:27:51

Это работает тем, что выбирает только один элемент, но когда вы нажимаете знак «плюс», он удаляет весь блок. .back txt не исчезает. – user20446

Сменить свой код для переадресации на плюс: $ ('. Flip-container .plus'). Click (function (e) { $ (this) .parent(). FadeOut ('slow', function()) { $ (этот) .next(). FadeIn ('slow'); }); }); –

jquery on click event, работающий над всеми div с тем же классом

ответ

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