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

如果您尝试将其他选择器恢复到原始亮度，则应该可以使用。

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

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

您需要做的是遍历可能具有您正在寻找的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">

Answer 3

使用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(); } });

Div选择器与jquery

3 个答案: