jsのfunction（）を複数まとめて書く方法

Question

お世話になっております。
jsのfunctionで、同じ処理が複数あるのでまとめたいのですが、初心者のため記述方法が分かりません。
test_funcの中からイメージをクリックすると、下リストの画像が表示されるというものです。
function a(),b(),c()のremoveClass,addClassをまとめて書きたいのですが、書き方を教えていただきたいです。

<ul class="test_func">　//選択
<li onclick="a()" class="test"><a href="" data-filter="a"><img src="../img/a.png"></a></li>
<li onclick="b()" class="test"><a href="" data-filter="b"><img src="../img/b.png"></a></li>
<li onclick="c()" class="test"><a href="" data-filter="c"><img src="../img/c.png"></a></li>
</ul>  
~~~~
//画像を表示
<div class="test1">
<ul class="list">
<li class="xx" data-category="a"><img src="../img/aa.png"><a href="1.html">1</a></li>
<li class="xx" data-category="b"><img src="../img/bb.png"><a href="2.html">2</a></li>
<li class="xx" data-category="c"><img src="../img/cc.png"><a href="3.html">3</a></li>
</div>
<div class="test2">
<ul class="list">
<li class="xx" data-category="a"><img src="../img/aa.png"><a href="1.html">1</a></li>
<li class="xx" data-category="b"><img src="../img/bb.png"><a href="2.html">2</a></li>
<li class="xx" data-category="c"><img src="../img/cc.png"><a href="3.html">3</a></li>
</div>

function a(){
  $('img#category_name').attr('src',   "../img/aaa.png");
  $('div.test1').removeClass('test2');
  $('div.test2').addClass('test1');
}
function b(){
  $('img#category_name').attr('src',   "../img/bbb.png");
  $('div.test2').removeClass('test1');
  $('div.test1').addClass('test2');
}
function c(){
  $('img#category_name').attr('src',   "../img/ccc.png");
  $('div.test2').removeClass('test1');
  $('div.test1').addClass('test2');
}

Comments

[yambejp]

jQueryでよいならjQueryタグつけてください

[meli]

ありがとうございます、追加致しました。

Answer 1

以下のようにされてはどうでしょう？

<ul class="test_func">　
<li onclick="hoge('../img/aaa.png')" class="test"><a href="" data-filter="a"><img src="../img/a.png"></a></li>
<li onclick="hoge('../img/bbb.png')" class="test"><a href="" data-filter="b"><img src="../img/b.png"></a></li>
<li onclick="hoge('../img/ccc.png')" class="test"><a href="" data-filter="c"><img src="../img/c.png"></a></li>
</ul>  

function hoge(path) {
  $('img#category_name').attr('src', path);
  $('div.test2').removeClass('test1');
  $('div.test1').addClass('test2');
}

Comments

[meli]

ご回答ありがとうございます！
無知なもので申し訳ないのですが、function hoge(path) {のpathにはどこのpathを描けばよろしいのでしょうか？

[nekoniki]

pathは関数の引数なので、onClickした要素から渡されてきます。
<li onclick="hoge('../img/aaa.png')" class="test"><a href="" data-filter="a"><img src="../img/a.png"></a></li>

例えば上記の場合、'../img/aaa.png'がpathになります。

[meli]

ありがとうございます！
てっきりpathに何かを書くのかと勘違いしておりましたが、pathのままで上手くいきました！
ご教示いただきありがとうございます！

Answer 2

liのclick処理と中のアンカーが競合している感じがします。
どちらか片方に絞ったほうが良いと思います

Comments

[meli]

ご回答ありがとうございます！
使用しているライブラリの影響で色々と試行錯誤してこの形になってしまったので、全体が出来次第、片方に絞るなどfixを検討していきたいと思います。
ご教示助かります、ありがとうございます。