スポンサード リンク
jquery hasClass()メソッド
hasClassメソッドは、セレクタで指定した要素のCSSクラス名が存在すればtrue、存在しなければfalseを返します
hasClassメソッドをつかえば、if文の条件分岐でhtmlの要素にclass属性でクラス名が一致しているときに処理できるようになります。!
のマークをjqueryオブジェクトの前につけると条件を否定したときに処理できます。!
のマークは論理演算子といいます
$("セレクタ").hasClass("クラス名");
指定したHTML要素のclass名が一致しているか判定する
a要素の子要素であるimg要素にマウスオーバーしたとき、class名がfooであったら画像を切り替えます。
attr("src")はsrc属性の値を取得します。この場合は画像のurlです
replace(a,b)はjavascriptのメソッドでaをbに置き換えます
マウスアウトも同様の処理です。わかりやすく書きましたが、hover()でも同様の処理ができます
class名がないHTML要素に反応がないことも確かめて下さい
jquery
$(function() { $("a img").mouseover(function(){ if ($(this).hasClass("foo")) { $(this).attr("src", $(this).attr("src").replace("_off", "_on")); } }) .mouseout(function(){ if ($(this).hasClass("foo")) { $(this).attr("src", $(this).attr("src").replace("_on", "_off")); } }); });
html
<ul> <li><a href="#"><img src="194_off.gif" alt="" class="foo"></a></li> <li><a href="#"><img src="194b_off.gif" alt=""></a></li> </ul>
サンプル