影响 JavaScript 中的 CSS 元素

Question

我正在处理一个项目，我刚刚到达了一个必须使用 JavaScript 删除 CSS 元素的地方。

我已经在这里粘贴了到目前为止我所做的： jsfiddle.net

运行代码后，您会注意到基本的注册步骤（左侧）和使用社交媒体的注册方法（右侧）。在这两个元素之间，有一个黄色背景的元素"OR"。

在左侧，当我决定注册为设计师时，新的领域出现了，社交媒体消失了。将我带到这里的主要问题是，我无法增加位于左侧的基本公式块的左边距，并且当用户决定注册为"设计师"时也无法删除"OR"，即使我使用

$(".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();
    }
  });

工作 js小提琴

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