クリックした際にCSSが変更できない jQuery

質問

jQueryについて詳しい方教えていただけませんでしょうか？
クリックをした際、スライドさせるように作っているのですが、同時にspanのCSS変更（arrowFD→arrowFR）もやりたいのですがなぜかうごきません・・・

＜jQuery＞
$(window).load(function(){
$('#faq .answer').not(':first').hide();
$('#faq .question').click(function() {
if($(this).next('.answer').is(':visible')) {
$(this).next('.answer').slideUp(300);
$("span.arrowFD").html('<span class="arrowFR"></span>'); //★ホントは、CSSだけ変更したい
} else {
$(this).next('.answer').slideDown(300).siblings('.answer').slideUp(300);
}
});
});//]]>

＜CSS＞
.question
{
padding:5px;
font-weight:500;
font-family: メイリオ;
font-size:14px;
border:1px solid #ddd;
background:#eee;
cursor: pointer;
}
.answer
{
padding:25px;
font-family:MS UI Gothic;
font-weight:500;
font-size:13px;
border:1px solid #ddd;
}
/* 三角矢印を前（Front）に（右向き：Right）でつける */
.arrowFR
{
position:relative;
top:0;
left:0;
padding-left:18px;
}
.arrowFR:before
{
content: "";
position: absolute;
top: 3px;
left: 2px;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 12px solid #000000;
}
/* 三角矢印を前（Front）に（下向き：Down）でつける */
.arrowFD
{
position:relative;
top:0;
left:0;
padding-left:18px;
}
.arrowFD:before
{
content: "";
position: absolute;
top: 3px;
left: 2px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 12px solid #000000;
}
＜HTML＞
<div id="faq">
<div class="question" id="tenmetsu">
<span class="arrowFD"></span>
<span style="font-weight:bold">｜</span> 香川真司
</div>
<div class="answer">Answer 01<br />Answer 01<br />Answer 01<br />Answer 01<br /></div>
<div class="question">
<span class="arrowFR"></span>
<span style="font-weight:bold">｜</span>
　長友佑都
</div>
<div class="answer">Answer 02<br />Answer 02<br />Answer 02<br />Answer 02<br /></div>
<div class="question">
<span class="arrowFR"></span>
<span style="font-weight:bold">｜</span>　本田圭佑
</div>
<div class="answer">Answer 03<br />Answer 03<br />Answer 03<br />Answer 03<br /></div>
</div>​

回答No.1

bvltiggeari · ベストアンサー

こんにちは！

こういう感じでできないでしょうか？
$("span.arrowFD").attr("class","arrowFR");

.attrの左側（第一引数）が属性（今回だとclassですが、imgのsrcとかでもOK！）で
右側（第二引数）が値になるという、とても便利なfunctionです♪

ただ、これだと全部変わっちゃう（例えば香川さんだけ変更したのに
長友さんの矢印まで変化してしまう）ので、
$("span.arrowFD",this).attr("class","arrowFR");
とかして、子要素だけが変わる工夫が必要かもしれませんね。

お礼

親切な回答ありがとうございました。
無事に一つの要素だけを動かすことが出来ました。
大変勉強になりました！