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

只拿一个元素而不是全部，这是我做错了，你能帮忙吗？，

第二个问题：当我点击此元素时，实际的类必须更改为删除箭头

这是de JQuery代码：

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

这也是您可以访问此代码的链接：

LINK：https://jsfiddle.net/95tngef5/

Answer 1

您需要为position的父元素提供position: absolute才能按预期工作。如果您添加.clickSeleccion { position: relative; }，则会修复此问题。

有关详细信息，请参阅positioning context on MDN。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

在css中选择器后，不会显示所有元素和JQquery错误

1 个答案: