Влияет на элемент CSS в JavaScript

Question

Я работаю над проектом, и я только что получил место, где мне нужно удалить элемент CSS с помощью JavaScript.

Я вставил то, что я сделал до сих пор здесь: jsfiddle.net

После запуска кода вы заметите основные этапы регистрации (слева) и методы регистрации с использованием социальных сетей (справа). И между этими двумя элементами есть элемент "ИЛИ" с желтым фоном.

С левой стороны, когда я решил зарегистрироваться в качестве дизайнера, появляются новые поля и социальные сети исчезают. Основная проблема, которая привела меня сюда, заключается в том, что я не могу увеличить левое поле блока базовой формулы, расположенного слева, а также не могу удалить "ИЛИ", когда пользователь решает зарегистрироваться как "дизайнер", даже если я использую

$(".form-register-with-email:after").hide();

Спасибо за помощь. Извините, я не являюсь носителем английского языка, я стараюсь изо всех сил.

Answer 1

Одним из способов было бы добавить класс к элементу контейнера и использовать CSS, нацеленный на потомков этого класса.

Для этого измените ваш CSS следующим образом:

/* add :not(.design) to this CSS rule*/
.main-content:not(.design) .form-register-with-email:after {
  content: 'OR';
  position: absolute;
  /*bottom: 396px;  remove this, see media query below*/ 
  right: -100px;
  border-radius: 50%;
  background-color: #edeca5;
  width: 50px;
  height: 50px;
  color: #93923b;
  font-size: 17px;
  line-height: 50px;
}
/* add these two new CSS rules*/
.main-content.design .form-register {
    margin-left: 11%;
}
/* Small Devices, Tablets */
@media only screen and (min-width: 920px) {
  .main-content:not(.design) .form-register-with-email:after {
     bottom: 396px;
  }
}

Затем измените свой JS на:

  $("#dropdown").change(function() {

    if ($("#dropdown").val() == "designer") {
      $('.main-content').addClass('design'); // add this line
      $("#design1").show();
      $("#design2").show();
      $(".form-sign-in-with-social").hide();
    } else {
      $('.main-content').removeClass('design'); // add this line
      $("#design1").hide();
      $("#design2").hide();
      $(".form-sign-in-with-social").show();
    }
  });

Рабочая jsFiddle

Answer 2

Вы не можете напрямую нацеливаться :after, Однако вы можете определить комбинацию классов с помощью :after скрытый. Затем вы можете добавить этот класс к целевому элементу.

$("#dropdown").change(function() {
  if ($("#dropdown").val() == "designer") {
    $(".form-register-with-email").addClass('designer');
  }
  ...
});

.form-register-with-email.designer:after {
  display: none;
}

JSFiddle