如何将jQuery应用于CSS选择器：before

Mangrio 发表于 Dev

曼格罗

这是我的场景，创建了一个div，CSS并X在之前在右上方添加了一个pseudo-class。如何在的帮助下单击X来关闭该div javascript？

的CSS

.validation-summary-errors{
    position: absolute;
    width: 260px;
    padding: 20px;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    background-color: #fff;
    text-align: center;
    font-size: 14px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 4px;
    border: #000 solid 1px;
    box-shadow: #232323 1px 1px 6px;
}

.validation-summary-errors:before {
    display: block;
    content: "X";
    position: absolute;
    right: -15px;
    top: -15px;
    background-color: rgba(0, 0, 0, 0.85);
    padding: 5px;
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
    width: 29px;
    box-sizing: border-box;
}

视图中的HTML（编辑）

 <div class="message-error">  

                            @validationSummary

                    </div>

普加兹

:before是一个伪元素，不能在DOM中访问。而是使用span或div带有这些样式并使用它的click事件。

注意：只需确保您为span.close:-)定义了CSS

解决方案1：如果可以编辑HTML。

$(function() {
  $('.close').click(function() {
    $(this).parent().hide();
  });
});

.validation-summary-errors {
  position: absolute;
  width: 260px;
  padding: 20px;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 4px;
  border: #000 solid 1px;
  box-shadow: #232323 1px 1px 6px;
}
span.close {
  cursor: pointer;
  display: block;
  content: "X";
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: rgba(0, 0, 0, 0.85);
  padding: 5px;
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
  width: 29px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="validation-summary-errors">
  This specified email already exists
  <span class="close">X</span>
</div>

解决方案2：如果HTML是动态创建的。

$(function() {
  $('.validation-summary-errors').append('<span class="close">X</span>');

  $('.validation-summary-errors').on('click', 'span.close', function() {
    $(this).parent().hide();
  });
});

.validation-summary-errors {
  position: absolute;
  width: 260px;
  padding: 20px;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 4px;
  border: #000 solid 1px;
  box-shadow: #232323 1px 1px 6px;
}
span {
  cursor: pointer;
  display: block;
  content: "X";
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: rgba(0, 0, 0, 0.85);
  padding: 5px;
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
  width: 29px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="validation-summary-errors">
  This specified email already exists
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。