Me gustaría addClass() con el mismo anclaje que disparo. Cuando hago clic en ancla, toda ID con el mismo ancla agregaría una nueva clase.

En este caso, utilizo la misma ID para disparar, sé que no es apropiado hacerlo. ¿Hay alguna manera mejor de cómo hacer algo similar a este trabajo? Por favor, si hay alguna solución mejor que agradecería, gracias

$('.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>
-2
rnDesto 2 may. 2017 a las 14:41

3 respuestas

La mejor respuesta

Dado que la propiedad href de las etiquetas de anclaje HTML5 se puede omitir, es mejor usar atributos de datos para esto. Y en CSS cursor: pointer si eso es importante para el usuario 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>

En 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');
});

De esta manera es un poco más flexible. También es fácil de simplificar / combinar tanto data-target como data-indi en un solo selector. Acabo de hacer algunos ejemplos en el selector de destino, por lo tanto, están separados en mi ejemplo.

1
Tim Vermaelen 2 may. 2017 a las 12:22

En html, realmente debería tener solo 1 elemento con un ID específico. Entonces deberías usar clases para la selección.

Aquí hay un ejemplo: https://jsfiddle.net/q3j30f04/3/

Aquí está el código:

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

Y este es el código js (dado que href contiene #, lo eliminamos y lo usamos con un prefijo ".", Que busca esa clase).

$('.main a').click(function(e){
  var anchor = $(this).attr('href').replace(/^#/,'');
  $('.'+anchor).addClass('active').siblings().removeClass('active');
})
1
Viktor Tabori 2 may. 2017 a las 11:55
$('.main a').click(function(e){
  var anchor = $(this).attr('href').replace("#",".");
  $(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 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>
1
Erdogan Oksuz 2 may. 2017 a las 11:54