Tengo un bloque de div. Quería agregar .active class a div .verified-account al hacer clic .title-box.has-value , también debería agregar class a .screen-answer .
Entonces, si se hace clic en el siguiente div, el div activo y en el que se hizo clic anteriormente debe eliminar su clase (por lo tanto, desactivar) y ocultar su fila debajo. El siguiente div seleccionado necesita obtener el mismo proceso que el anterior.
<div class="screen-start"> <div class="screenbox"> <div class="btn-screen box-start"> <div class="title-box has-value blue-bg">YES</div> <div class="verified-account"></div> </div> <div class="btn-screen box-start"> <div class="title-box has-value green-bg">AMAZING!!!</div> <div class="verified-account"></div> </div> <div class="btn-screen box-start"> <div class="title-box has-value green-bg">MAYBE YES.</div> <div class="verified-account"></div> </div> </div> <div class="screen-answerbox"> <div class="screen-answer blue">This was a active </div> <div class="screen-answer green">This was a active </div> <div class="screen-answer green">This was a active </div> </div> </div>mi codigo jquery
jQuery(document).ready(function($) { var selector = '.title-box.has-value'; $(selector).on('click', function(){ $(selector).closest('.btn-review').find('.icons8-verified-account').removeClass('active'); $(this).closest('.btn-review').find('.icons8-verified-account').addClass('active'); $(selector).parents('.rating-start').find('.range-answer').removeClass('active'); $(this).parents('.rating-start').find('.range-answer').addClass('active'); }); });Solo puedes usar:
$('.verified-account').removeClass("active"); $(this).next('.verified-account').addClass("active"); La primera línea eliminó .active de todos los elementos con la clase Verified verified-account ;
La segunda línea agrega la clase active al elemento verified-account relacionado con el elemento de clic.
Manifestación
jQuery(document).ready(function($) { var selector = '.title-box.has-value'; $(selector).on('click', function() { var inx = $(selector).index(this); $(selector).closest('.btn-review').find('.icons8-verified-account').removeClass('active'); $(this).closest('.btn-review').find('.icons8-verified-account').addClass('active'); $(selector).parents('.rating-start').find('.range-answer').removeClass('active'); $(this).parents('.rating-start').find('.range-answer').addClass('active'); $('.verified-account').removeClass("active"); $(this).next('.verified-account').addClass("active"); $('.screen-answer').removeClass("active"); $('.screen-answer').eq(inx).addClass("active") }); }); .active { color: yellow; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="screen-start"> <div class="screenbox"> <div class="btn-screen box-start"> <div class="title-box has-value blue-bg">YES</div> <div class="verified-account">Verify</div> </div> <div class="btn-screen box-start"> <div class="title-box has-value green-bg">AMAZING!!!</div> <div class="verified-account">Verify</div> </div> <div class="btn-screen box-start"> <div class="title-box has-value green-bg">MAYBE YES.</div> <div class="verified-account">Verify</div> </div> </div> <div class="screen-answerbox"> <div class="screen-answer blue">This was a active </div> <div class="screen-answer green">This was a active </div> <div class="screen-answer green">This was a active </div> </div> </div>