Sorry for the noob question, but help me figure it out and tell me how to implement it correctly:

There are 3 blocks in which the title, text, price, button. When you click on a button of a certain block, the color of the title, price, and buttons changes (I add the active class), but the parameters also change for other blocks, so if you click on the button of this block, only the parameters of this block change, click on a button from another block - the parameters were allocated from another block

$('.order-form').click(function() { $(".name, .price, .price .rub").removeClass("active"); $(".name").toggleClass("active"); $(".price, .price .rub").toggleClass("active"); }); 
 .form-of-training { display: inline-block; max-width: 370px; width: 100%; height: auto; background-color: white; border-radius: 3px; box-shadow: 0 0 24px rgba(0, 0, 2, 0.08); padding: 45px 70px 60px; margin-bottom: 30px; } .name { text-align: center; font-weight: 400; color: gray; font-family: $MB; font-size: 30px; margin-top: 0; margin-bottom: 15px; } .name.active { color: blue; } .text { display: block; font-weight: 400; color: gray; font-size: 18px; font-family: $ML; text-align: center; margin-bottom: 15px; height: 75px; } .price { color: gray; font-size: 24px; font-family: $MB; font-weight: 400; display: block; text-align: center; margin-bottom: 20px; } .price.active { color: blue; } .rub { font-family: "ALSRubl", sans-serif; font-size: 24px; color: gray; } .rub.active { color: blue; } .order-form { display: block; margin: 0 auto; padding: 8px 35px 6px 35px; box-sizing: border-box; background-color: black; color: white; font-family: $ML; font-size: 19px; font-weight: 400; text-transform: uppercase; @include border-radius($radius: 4px); @include transition(background-color .6s); &: hover { background-color: blue; color: white; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-of-training variant-one"> <div class="name">Очная</div> <span class="text">36 академических часов, занятия по будням или субботам</span> <span class="price">15 000<span class="rub">p</span></span> <button class="order-form">Заказать</button> </div> <div class="form-of-training variant-two"> <div class="name">Заочная</div> <span class="text">Работа с преподавателем по e-mail</span> <span class="price">21 800<span class="rub">p</span></span> <button class="order-form">Заказать</button> </div> <div class="form-of-training variant-three"> <div class="name">Экспресс-курс</div> <span class="text">В Черногории! 3 полных дня в учебном классе в городе Бар</span> <span class="price">270 &euro;</span> <button class="order-form">Заказать</button> </div>

    1 answer 1

    The bottom line is that it .form-of-training first on the parent of the .form-of-training button, and then on the children of that parent. So here

     $('.order-form').click(function() { $('.form-of-training').find(".name, .price, .price .rub").removeClass("active"); $(this).parents('.form-of-training').find(".name").toggleClass("active"); $(this).parents('.form-of-training').find(".price, .price .rub").toggleClass("active"); }); 
     .form-of-training { display: inline-block; max-width: 370px; width: 100%; height: auto; background-color: white; border-radius: 3px; box-shadow: 0 0 24px rgba(0, 0, 2, 0.08); padding: 45px 70px 60px; margin-bottom: 30px; } .name { text-align: center; font-weight: 400; color: gray; font-family: $MB; font-size: 30px; margin-top: 0; margin-bottom: 15px; } .name.active { color: blue; } .text { display: block; font-weight: 400; color: gray; font-size: 18px; font-family: $ML; text-align: center; margin-bottom: 15px; height: 75px; } .price { color: gray; font-size: 24px; font-family: $MB; font-weight: 400; display: block; text-align: center; margin-bottom: 20px; } .price.active { color: blue; } .rub { font-family: "ALSRubl", sans-serif; font-size: 24px; color: gray; } .rub.active { color: blue; } .order-form { display: block; margin: 0 auto; padding: 8px 35px 6px 35px; box-sizing: border-box; background-color: black; color: white; font-family: $ML; font-size: 19px; font-weight: 400; text-transform: uppercase; @include border-radius($radius: 4px); @include transition(background-color .6s); &: hover { background-color: blue; color: white; } } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-of-training variant-one"> <div class="name">Очная</div> <span class="text">36 академических часов, занятия по будням или субботам</span> <span class="price">15 000<span class="rub">p</span></span> <button class="order-form">Заказать</button> </div> <div class="form-of-training variant-two"> <div class="name">Заочная</div> <span class="text">Работа с преподавателем по e-mail</span> <span class="price">21 800<span class="rub">p</span></span> <button class="order-form">Заказать</button> </div> <div class="form-of-training variant-three"> <div class="name">Экспресс-курс</div> <span class="text">В Черногории! 3 полных дня в учебном классе в городе Бар</span> <span class="price">270 &euro;</span> <button class="order-form">Заказать</button> </div>

    • everything seems to be fine, but when you click on a new block, the highlighted points of the previous block remain active, and you need only the current items to be active - sagan
    • @sagan, fixed - Yuri
    • very much helped out, thanks !!! - sagan
    • @sagan, the point is that it .form-of-training first on the parent of the .form-of-training button, and then on the children of this parent — Yuri
    • Well, I already understood this based on the code - sagan