jQueryの関数は、私はを再利用することができます機能を作りたい

Question

同じクラスで複数のものの一つの要素を選択するために、それはだ、コードは以下の通りです：

function changeClass(name)

：私が欲しいもの

<div id="shot_filters"> 
 
    <a href="#" id="filter_active"> 
 
    <span class="filter_row_down"></span> By date </a> 
 
    <a href="#"> 
 
    <span class="filter_row_down"></span> By likes </a> 
 
    <a href="#"> 
 
    <span class="filter_row_down"></span> By views </a> 
 
    <span class="filter_p"></span> 
 
    <a href="#" class="tags_flip"><img src="static/img/retina/tags_icon.png" style="width: 13px; height: 14px">Tag search</a> 
 
    <span class="filter_p"></span> 
 
    <a href="#"><img src="static/img/retina/gallery_icon.png" style="width: 13px; height: 12px">Beauty gallery</a> 
 
</div>

は、そのような関数を作ることです複数のhrefとそのクラスから、自分のCSSを変更するためにそれぞれをクリックするといいと思います。たとえば、好きなものをクリックすると、span classが変更され、href idがfilter_activeとして追加され、 。

アイデア？

Answer 1

$(function(){ 
 
    $('#shot_filters a').on('click',function(){ 
 
     $('#shot_filters a').removeClass('active'); 
 
     $(this).addClass('active'); 
 
    }) 
 
})

.active{ 
 
color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="shot_filters"> 
 

 
    <a href="#" id="filter_active"> 
 
     <span class="filter_row_down"></span> 
 
     By date \t \t \t \t </a> 
 

 
    <a href="#"> 
 
     <span class="filter_row_down"></span> 
 
     By likes \t \t \t \t </a> 
 

 
    <a href="#"> 
 
     <span class="filter_row_down"></span> 
 
     By views \t \t \t \t </a> 
 

 
    <span class="filter_p"></span> 
 
    <a href="#" class="tags_flip"> 
 
     <img src="static/img/retina/tags_icon.png" style="width: 13px; height: 14px">Tag search</a> 
 

 
    <span class="filter_p"></span> 
 
    <a href="#"> 
 
     <img src="static/img/retina/gallery_icon.png" style="width: 13px; height: 12px">Beauty gallery</a> 
 

 
</div>

、あなたはアクティブなクラスを追加し、他の人から削除する単一のタグでユーザーのクリックを必要とするときねえ、あなたはすべてのアンカータグにイベントを必要としますこのように。

Answer 2

リッスンする要素ごとに個別のリスナーを作成する必要があります。

$("a").each(function(){ 
 
    $(this).click(function(){ 
 
     $(this).toggleClass("class1"); 
 
    }); 
 
});

a::after{ 
 
    content: "\A"; 
 
    white-space: pre; 
 
} 
 
.baseclass{ 
 
    cursor:pointer; 
 
    color: blue; 
 
} 
 
.class1{ 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="baseclass class1">Row : Click Me</a> 
 
<a class="baseclass class1">Row : Click Me</a> 
 
<a class="baseclass class1">Row : Click Me</a> 
 
<a class="baseclass class1">Row : Click Me</a> 
 
<a class="baseclass class1">Row : Click Me</a> 
 
<a class="baseclass class1">Row : Click Me</a> 
 
<a class="baseclass class1">Row : Click Me</a> 
 
<a class="baseclass class1">Row : Click Me</a>