JQueryで、liタグの背景に色を付けたい。

解決済

質問者：kureakai
質問日時：2012/03/11 19:57
回答数：1件

JQueryで、各liタグに背景色を付けたいのですが、
上手くいきません。多分clickあたりで間違ってると思うのですが・・・。

そもそも、clickの後ろには、functionを書けばいいのか？(以下ソースと同じ)
それとも$だけなのか、概念がはっきり分かってません。

書き方等の解説をしてくれているページはないでしょうか・・・。
いろいろ調べてみたのですが、こうかけば動く。見たいな事しか書いてなくて
基本があやふやになっております。

ご教授お願いします。

====以下ソース====
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>jQueryテスト</title>
<script type="text/javascript" src="../jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("input:button").click(function('#list'){
.find('li.high').css('backgroundColor', 'red').end()
.find('li.middle').css('backgroundColor', 'green').end()
.find('li.low').css('backgroundColor', 'blue');
});
});
</script>

</head>
<body>

<ul id="list">
<li class="high">a</li>
<li class="middle">b</li>
<li class="low">c</li>
</ul>

<form>
<input type="button" value="背景変更">
</form>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： LancerVII
回答日時：2012/03/12 09:35

こんにちは。

おそらく多くの人はリファレンスを見て、この関数にはこんな引数があってこんな戻り値があるんだと調べて実装していると思います。
jQuery入門みたいな検索ワードで探してみては如何でしょうか。

私の場合、サンプルを見てとりあえずたくさん作ってみてという方法なので書き方の説明はうまくないですすみません。

ソースを手直ししてみました（現状ですと構文エラーとなって動いていません）

$(function() {
$('input:button').click ( function() {
$('#list').
find('li.high').css ( 'background-color', 'red' ).parent().
find('li.middle').css ( 'background-color', 'green' ).parent().
find('li.low').css ( 'background-color', 'blue' );
});

clickには実行したい関数を渡すことが出来ますので上記のようになります。

$('input:button').click ( function() {
inputのbutton属性の要素がclickされたときに
$('#list').
find('li.high').css ( 'background-color', 'red' ).parent().
idがlistの要素内のli.highの背景色にredをセット
find('li.middle').css ( 'background-color', 'green' ).parent().
親要素(parent())内のli.middleの背景色にgreenをセット

となっています。