jquery - 带有 jquery 的 Div 选择器

Question

我有一个页面，我想在其中放置一个选择器，用户可以在其中选择不同的选项，但他只能选择 1 并获取所选部分的 ID，因此我可以将 ID 放在链接中，它有 2 个部分，我从未使用过 jquery，所以我很挣扎。这是网站代码的样子(这是一个例子):

选择器 1

 <div class="col-xs-4 col-md-2">

<div id="" class="cuadro center su-signo">
<img src="" class="img-responsive" alt="">
    <div class="titulo">
<h3 class="red"><small></small></h3>
  </div>
 </div>

</div>

 <div class="col-xs-4 col-md-2">

<div id="" class="cuadro center su-signo">
<img src="" class="img-responsive" alt="">
    <div class="titulo">
<h3 class="red"><small></small></h3>
  </div>
 </div>

</div>

 <div class="col-xs-4 col-md-2">

<div id="" class="cuadro center su-signo">
<img src="" class="img-responsive" alt="">
    <div class="titulo">
<h3 class="red"><small></small></h3>
  </div>
 </div>

</div>

选择器 2

<div class="col-xs-4 col-md-2">

<div id="" class="cuadro center tu-signo">
<img src="" class="img-responsive" alt="">
    <div class="titulo">
<h3 class="red"><small></small></h3>
  </div>
 </div>

</div>

<div class="col-xs-4 col-md-2">

<div id="" class="cuadro center tu-signo">
<img src="" class="img-responsive" alt="">
    <div class="titulo">
<h3 class="red"><small></small></h3>
  </div>
 </div>

</div>

<div class="col-xs-4 col-md-2">

<div id="" class="cuadro center tu-signo">
<img src="" class="img-responsive" alt="">
    <div class="titulo">
<h3 class="red"><small></small></h3>
  </div>
 </div>

</div>

Jquery 到目前为止:

<script>
var me = "";
var th = "";
   $(".tu-signo").on('click',function()  {
     me = $(this).attr("id");
        $(this).css('-webkit-filter','brightness(50%)');
    });


</script>

希望你能帮助我。

Answer 1

这是开发网站时的常见问题。一个典型的例子是当您想要将事件类添加到导航元素或选择选项卡时。

您需要做的是遍历所有可能具有您要查找的 CSS 类的元素并将其删除。然后将 CSS 类添加到当前元素。

在我下面的示例中，您可以看到我们删除了 .active来自所有导航项的类，然后添加 .active到被点击的元素。

$links = $( '.nav a' );

$links.on( 'click', function (e ) {

  $links.removeClass( 'active' );
  $( this ).addClass( 'active' );

});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
  <a class="active" href="#">Home</a>
  <a href="#">Contact</a>
  <a href="#">About</a>
</nav>

为了您的使用，我建议使用 CSS 类而不是 .css()将内联样式添加到您的元素的方法。与少量内联样式相比，添加/删除/切换类要容易得多。

这是另一个例子，它正在做一些更接近你想做的事情。

$links = $( '.nav a' );
$id = $( '.id' );

$links.on( 'click', function (e ) {

  var $this = $( this );

  $links.removeClass( 'active' );      
  $this.addClass( 'active' );
  $id.val( $this.attr( 'id' ) );  

});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
  <a id="home" class="active" href="#">Home</a>
  <a id="contact" href="#">Contact</a>
  <a id="about" href="#">About</a>
</nav>
<input class="id" type="text" name="id">