jqueryで同じIDのクラスを追加する方法

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にとって重要である場合。 JSで

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

：

$('.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の両方を1つのセレクタに単純化/結合することも簡単です。私はちょうどターゲットセレクタのいくつかの例を作ったので、私の例では分かれています。

Answer 2

実際には、特定のIDを持つ要素が1つだけ必要です。だから、あなたは選択のためにクラスを使うべきです。ここで

は一例です。ここで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に＃が含まれているので、我々はそれを削除していることを使用します「」接頭辞、そのクラスを検索します。）

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

Answer 3

$('.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>