jquery hasClassメソッド

TOPページに戻る > jquery入門

スポンサード リンク

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>

サンプル







(C)2012 ホームページ作成無料