ユーザーがクリックした要素class
の位置を保持して保存しました。タグがクリックされたときに、その値を取得し、要素タグにクラスとして追加したいと考えています。以下の図のようにやってみましたが、多くのコードにこのように感じます。これを可能な限り最短のワットで行うにはどうすればよいでしょうか? i
a
a
attr
i
<i id="pps_ToggledIcon" class="pisp_p pISImage"></i>
<li class="privListItem checkedList selectedList li_public">
<a href="/p" class="psLink" title="pisp_p">
<span class="privLabel">PP</span>
</a>
</li>
<li class="privListItem checkedList selectedList li_public">
<a href="/f" class="psLink" title="pisp_f">
<span class="privLabel">F</span>
</a>
</li>
<li class="privListItem checkedList selectedList li_public">
<a href="/o" class="psLink" title="pisp_o">
<span class="privLabel">O</span>
</a>
</li>
JSはこちら
$(".xyp li a").on("click", function(e) {
var pIcnSltd = $(this).attr("title");
var pTIcn = $("#pps_ToggledIcon");
if (pTIcn.hasClass("pisp_f") || pTIcn.hasClass("pisp_o")) {
pTIcn.removeClass("pisp_f");
pTIcn.removeClass("pisp_o");
pTIcn.addClass("pisp_p");
}
else if (pTIcn.hasClass("pisp_p") || pTIcn.hasClass("pisp_o")) {
pTIcn.removeClass("pisp_p");
pTIcn.removeClass("pisp_o");
pTIcn.addClass("pisp_f");
}
else if (pTIcn.hasClass("pisp_p") || pTIcn.hasClass("pisp_f")) {
pTIcn.removeClass("pisp_p");
pTIcn.removeClass("pisp_f");
pTIcn.addClass("pisp_f");
}
});