javascript - 在 css 中的选择器不显示在所有元素和 JQuery 错误之后

Question

我有两个问题，在这种情况下我希望你能帮助我，当我尝试将此 css 应用于所有 div 元素时它没有发生:

这是 html:

 <div class="thumb clickSeleccion" id="seleccionImagen">
   <a class="thumbnail "  style="margin-bottom:10px;height: 145px;width: 145px"></a>
</div>

 <div class="thumb clickSeleccion" id="seleccionImagen-1">
   <a class="thumbnail "  style="margin-bottom:10px;height: 145px;width: 145px"></a>
</div>

这是CSS。

.clickSeleccion::after {
    font-family: FontAwesome;
    font-size: x-large;
    content: "\f058";
    position: absolute;
    top: 5px;
    left: 14px;
    color: #ffffff;
    display: inline;
    margin-left: 98px;
    height: 18px;
    width: 18px;
    text-align: center;
    text-shadow: 2px 2px black;
}

只取一个元素而不是所有元素，我做错了什么，你能帮忙吗？，

1. 第二个问题:当我点击这个元素时，实际的类必须改变以移除箭头

这是 de JQuery 代码:

 $('.thumb').click(function() {                
       if($( "#"+this.id ).hasClass('clickSeleccion')){
            $( "#"+this.id ).removeClass( 'clickSeleccion' ).addClass( 'clickSeleccionNO' );
        }else{
            $( "#"+this.id ).removeClass( 'clickSeleccionNO' ).addClass( 'clickSeleccion' );
        }
    });

此外，这是您可以访问此代码的链接:

链接:https://jsfiddle.net/95tngef5/

谢谢。抱歉我的英语不好，我可能没有很好地解释。

Answer 1

您需要为父元素提供一个position，以便position: absolute 能够按您的预期工作。如果添加 .clickSeleccion { position: relative; 它是固定的； }。

参见 positioning context on MDN了解详情。

$('.thumb').click(function() {
  if ($("#" + this.id).hasClass('clickSeleccion')) {
    $("#" + this.id).removeClass('clickSeleccion').addClass('clickSeleccionNO');
  } else {
    $("#" + this.id).removeClass('clickSeleccionNO').addClass('clickSeleccion');
  }
});

.clickSeleccion {
  position: relative;
}

.clickSeleccion::after {
  font-family: FontAwesome;
  font-size: x-large;
  content: "\f058";
  position: absolute;
  top: 5px;
  left: 14px;
  color: #ffffff;
  display: inline;
  margin-left: 98px;
  height: 18px;
  width: 18px;
  text-align: center;
  text-shadow: 2px 2px black;
}

.thumb {
  width: 150px;
  height: 150px;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumb clickSeleccion" id="seleccionImagen">
  <a class="thumbnail " style="margin-bottom:10px;height: 145px;width: 145px"></a>
</div>

<div class="thumb clickSeleccion" id="seleccionImagen-1">
  <a class="thumbnail " style="margin-bottom:10px;height: 145px;width: 145px"></a>
</div>