добавить и удалить класс с jquery

Question

как я могу добавить класс ко второму элементу, когда я щелкаю по первому элементу, и удалять его, когда я щелкаю по второму элементу.

<div>
  <input type="radio" class="element1">
  <input type="radio" class="element2">
</div>

<div>
  <input type="radio" class="element1">
  <input type="radio" class="element2">
</div>

<div>
  <input type="radio" class="element1">
  <input type="radio" class="element2">
</div>

Я связал этот код, но не работает должным образом, добавить и удалить класс во всех div

$('.element1').on('click',function(){
   $('.element2').addClass('active');

});
$('.element2').on('click',function(){
   $('.element2').removeClass('active');

});

Answer 1

Вам понадобится немного javascript или используйте библиотеку как jQuery, я не совсем понимаю ваш ответ, поэтому надеюсь, что это поможет вам.

function add_class() {
  document.getElementById('element2').setAttribute("class", "style_button new_style");
}

function remove_class() {
  //document.getElementById('element1').removeAttribute("class");
  document.getElementById('element2').setAttribute("class", "style_button");
}

.style_button {
  width: 64px;
  height: 32px;
  border-radius: 25px;
  color: blue;
  background-color: #f7e33e;
}

.new_style {
  background-color: red;
  color: yellow;
}

<div>
  <input id="element1" type="button" class="style_button" onclick="add_class()" value="Add">
  <input id="element2" type="button" class="style_button" onclick="remove_class()" value="Remove">
</div>

Для получения дополнительной информации вы можете посетить https://www.w3schools.com/jsref/met_element_setattribute.asp

Answer 2

//On DOM ready, add click event handlers to elements with className element1
//When element1 is clicked, it gets all siblings with className element2 and adds the className you want
//Adds event handler for click on elements with className element2 and removes the className
//This solution is done using JQuery
$(function(){
    $('.element1').on('click', function(){
        $(this).siblings('.element2').addClass('active');
    });

    $('.element2').on('click', function(){
        $(this).removeClass('active');
    });
});