@v-orlov

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

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

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

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

<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');
    });


Заранее спасибо
  • Вопрос задан
  • 279 просмотров
Решения вопроса 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');
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@r1ch
Вот пример https://jsfiddle.net/rishatsharafiev/odahp010/
При клике на квадраты они становятся красными и наоборот.
Ответ написан
Комментировать
Комментировать
nafelsay
@nafelsay
Учусь верстать, ищу команду.
Простым языком про $(this).

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

Войдите, чтобы написать ответ

Похожие вопросы