影响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();
    }
  });

Working 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