javascript - 如何在 css 选择器 :before 上应用 jQuery

标签 javascript jquery html css asp.net-mvc

<分区>

这是我的场景，使用 CSS 创建了一个 div 并在 伪类之前的右上角添加了一个 X 。如何在 javascript 的帮助下通过单击 X 关闭此 div？

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;
}

View 中的 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>

关于javascript - 如何在 css 选择器 :before 上应用 jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38915075/

上一篇：html - 从 R 中的列表中提取一些缺失值的 href

下一篇：html - 将 foreach 与表行绑定(bind)

相关文章：

javascript - 为什么我的输入字段中填充了生成焦点事件的键？

javascript - jsPlumb 连接器不可拖动

html - 为什么要清除div？

javascript字符串替换特殊字符

JavaScript - 如何更改字符串的元素？

javascript - 如何将数组 [1,2,3,4] 更改为 [1,3,4]

javascript - 如何从 Javascript 中的自定义属性获取元素？

javascript - 使用未收到的数据将数据 POST 到 PHP 的另一个页面，以便使用 Ajax 进行处理

javascript - ASP自定义控件-如何在JS/jQuery中获取子控件

jquery - append 一个 div，具体取决于选中的单选按钮