Question

我希望addClass()使用相同的锚点触发。当我单击锚点时，所有具有相同锚点的ID都会添加新类。

在这种情况下，我使用相同的ID来触发，我知道它不适合这样做。有没有更好的方法如何对这项工作做类似的事情如果有任何更好的解决方案将不胜感激，谢谢

$('.main a').click(function(e){
  var anchor = $(this).attr('href');
  $(anchor).addClass('active').siblings().removeClass('active');
})

.content,
.indicator{
  margin-top: 30px;
  clear: both;
  overflow: hidden;
}
.box{
  width: 50px;
  height: 50px;
  background-color: green;
  float: left;
  margin-right: 10px;
  
}

.indi{
  width: 5px;
  height: 5px;
  background-color: blue;
  float: left;
  margin-right: 5px;
}

.box.active,
.indi.active{
  border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <a href="#item1">item1</a>
  <a href="#item2">item2</a>
  <a href="#item3">item3</a>
</div>

<div class="content">
  <div id='item1' class="box"></div>
  <div id='item2' class="box"></div>
  <div id='item3' class="box"></div>
</div>

<div class="indicator">
  <div id='item1' class="indi"></div>
  <div id='item2' class="indi"></div>
  <div id='item3' class="indi"></div>
</div>

Answer 1

由于可以省略HTML5锚标记的href属性，因此最好为此使用数据属性。在CSS cursor: pointer中，如果这对用户xp很重要。

<div class="main">
    <a data-target="#item1" data-indi="item1">item1</a>
    <a data-target=".item2" data-indi="item2">item2</a>
    <a data-target="[data-id=item3]" data-indi="item3">item3</a>
</div>
<div class="content">
    <div id="item1" class="box"></div>
    <div class="box item2"></div>
    <div class="box" data-id="item3"></div>
</div>
<div class="indicator">
    <div data-id="item1" class="indi"></div>
    <div data-id="item2" class="indi"></div>
    <div data-id="item3" class="indi"></div>
</div>

在js：

$('.main a[data-target]').click(function(e){
    var el = $(this),
        target = el.data('target'),
        indi = el.data('indi'),
        indiTarget = $('[data-id="'+indi+'"]');
    $(target).add(indiTarget).addClass('active').siblings().removeClass('active');
});

这种方式更灵活一些。还可以轻松简化/将data-target和data-indi组合到一个选择器中。我刚刚在目标选择器上做了一些例子，因此在我的例子中它们是分开的。

Answer 2

在html中，你真的应该只有一个具有特定ID的元素。所以你应该使用类进行选择。

以下是一个示例：https://jsfiddle.net/q3j30f04/3/

以下是代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <a href="#item1">item1</a>
  <a href="#item2">item2</a>
  <a href="#item3">item3</a>
</div>

<div class="content">
  <div class="box item1"></div>
  <div class="box item2"></div>
  <div class="box item3"></div>
</div>

<div class="indicator">
  <div class="indi item1"></div>
  <div class="indi item2"></div>
  <div class="indi item3"></div>
</div>

这是js代码（因为href包含＃，我们删除它并使用＆＃34;。＆＃34;前缀，搜索该类。）

$('.main a').click(function(e){
  var anchor = $(this).attr('href').replace(/^#/,'');
  $('.'+anchor).addClass('active').siblings().removeClass('active');
})

Answer 3

＆＃13;

$('.main a').click(function(e){
  var anchor = $(this).attr('href').replace("#",".");
  $(anchor).addClass('active').siblings().removeClass('active');
})

＆＃13;

.content,
.indicator{
  margin-top: 30px;
  clear: both;
  overflow: hidden;
}
.box{
  width: 50px;
  height: 50px;
  background-color: green;
  float: left;
  margin-right: 10px;
  
}

.indi{
  width: 5px;
  height: 5px;
  background-color: blue;
  float: left;
  margin-right: 5px;
}

.box.active,
.indi.active{
  border: 2px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <a href="#item1">item1</a>
  <a href="#item2">item2</a>
  <a href="#item3">item3</a>
</div>

<div class="content">
  <div class="box item1"></div>
  <div class="box item2"></div>
  <div class="box item3"></div>
</div>

<div class="indicator">
  <div class="indi item1"></div>
  <div class="indi item2"></div>
  <div class="indi item3"></div>
</div>

＆＃13;

如何使用相同的ID与jquery addClass

3 个答案: