Div 选择器 jquery

Question

我有一个页面，我想在其中放置 select 或用户有不同选项但他只能 select 1 并获取该 selected 部分的 ID所以我可以将 id 放在 link 中，它有 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

和jquery如果你想让它在你改变的时候隐藏已有的选择，你需要添加移除功能，这个不太直观。

（假设我了解您想要实现的目标。

即。

var me = ""; var th = ""; $(".tu-signo").on('click',function() { if ($(this).attr("id") == "option1") { $('#option1').css('-webkit-filter','brightness(50%)'); $('#option2').hide(); } if ($(this).attr("id") == "option2") { $("#option2").css('-webkit-filter','brightness(50%)'); $("#option1").hide(); } });

Answer 2

如果您尝试将其他选择器调回原来的亮度，这应该可行。

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


</script>

这将使所有 .tu-signo 类恢复到更改您单击的亮度之前的原始亮度。而且我不确定 var th; 是做什么用的，所以我删除了它。

Answer 3

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

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

在下面的示例中，您可以看到我们从所有导航项中删除了 .active class，然后将 .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 class 而不是 .css() 方法，后者会向您的元素添加内联样式。 add/remove/toggle class 比一些内联样式要容易得多。

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

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

Div 选择器 jquery

Div selector with jquery

css

jquery

selector