Как на jquery заставить работать эффект только определенного блока с не уникальным классом?

Question

[v-orlov]

Мне крайне нелегко дается понимание работы this для определенных блоков. Буду рад помощи с тривиальной задачей и подсказкой, где можно найти разжеванную инфу по работе этого самого this "для одаренных".


У меня два блока с одинаковыми классами и всевозможным содержимым, которое должно меняться после клика на кнопку внутри этого конкретного блока.
Подскажите, пожалуйста, как это сделать правильнее. На картинке утрированный пример. Беда в том, что, когда эффект срабатывает, то он работает вообще на всех блоках одновременно.

Спасибо за примеры, но это немного не то. Чтобы не сбивать, вот мой пример:

<div class="class-1">
     <div class="red-line"></div>

     <div class="first-btn"></div>
     <div class="second-btn" style="display:none;"></div>

     <div class="my-content">545646</div>
</div>

<div class="class-1">
     <div class="red-line"></div>

     <div class="first-btn"></div>
     <div class="second-btn" style="display:none;"></div>

     <div class="my-content">12323</div>
</div>

$('.first-btn').click(function() {
        $('.red-line').css('display' , 'none');
        $('.my-content').css('height' , '500px');

        $('.second-btn').css('display' , 'block');
        $('.first-btn').css('display' , 'none');
    });

Заранее спасибо

Answer 1

[v-orlov]

Для таких же умников, как и я, оставлю решение, с которым помогли:

$('.first-btn').click(function () {
    var parent = $(this).parent();

    $('.red-line', parent).css('display', 'none');
    $('.my-content', parent).css('height', '500px');

    $('.second-btn', parent).css('display', 'block');
    $('.first-btn', parent).css('display', 'none');
});

Answer 2

[r1ch]

Вот пример https://jsfiddle.net/rishatsharafiev/odahp010/
При клике на квадраты они становятся красными и наоборот.

Answer 3

[Андрей Клюев]

https://jsfiddle.net/andreykluev/d9pfo3fm/

Answer 4

[Павел Алмазов]

Простым языком про $(this).

если вы выберете элемент таким образом
$('.main').click(function(){
$(this).css('backgroun-color', 'red')
Это означает что стиль будет применён к выбранному элементу с классом .main,
по клику получит красный фон.
Если вместо $('this') вы напишите другой селектор, например
$('.main').click(function(){
$('.main2').css('backgroun-color', 'red')
то элемент с классом .main2 по клику на .main получит красный фон