javascript - 影响javascript中的CSS元素

Question

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

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

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

当我决定注册为设计师时，在左侧出现了新字段，社交媒体消失了。把我带到这里的主要问题是，当用户决定注册为“设计师”时，我无法增加位于左侧的基本公式 block 的左边距，也无法删除“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