jqueryのvalue習得によるhtml書き換え

質問

jqueryにてvalueの値を取得し、同じ値を持つ要素を消去した後、別のものに書き換えたいと思います。

目的：
「value=4」を持つ要素をクリックしたらその要素だけではなく、属性「value=4」を持つ他の要素を入れ替えたい。
HTMLソース
------------------------------------------------
<ul>
<li><a href="" class="counter" value=1>test</a></li>
<li><a href="" class="counter" value=1>test</a></li>
<li><a href="" class="counter" value=2>test</a></li>
<li><a href="" class="counter" value=1>test</a></li>
<li><a href="" class="counter" value=3>test</a></li>
<li><a href="" class="counter" value=4>test</a></li>
<li><a href="" class="counter" value=5>test</a></li>
<li><a href="" class="counter" value=4>test</a></li>
<li><a href="" class="counter" value=4>test</a></li>
<li><a href="" class="counter" value=4>test</a></li>
<li><a href="" class="counter" value=5>test</a></li>
<li><a href="" class="counter" value=5>test</a></li>
</ul>
------------------------------------------------
javascriptソース
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$(".counter").click(function () {
siteID =$(this).attr("value");

$(".counter([value=siteID])").css("background-color","#000");

});
});
</script>

何とかvalueの値を取得することは出来たのですが、その後の動作がわかりません。
上記の方法で解決するかと思えたのですが、ここから先が進みませんでした。
試しに背景色のみを同じ値を持つ要素を書き換えようと思っております。
どちらかご教授頂ければ幸いに御座います。

回答No.2

Ogre7077 · ベストアンサー

とりあえず動く様に修正

$(function(){ $(".counter").click(function(){

// var を使うこと。グローバル領域汚染防止のため
var siteID = $(this).attr("value");

// JavaScriptに埋め込み変数構文はないので文字列連結
$(".counter[value=" + siteID + "]").css("background-color","#000");

// 動作確認のためにリンク動作を抑制する false を返す
return false;

}); });

お礼

有難うございます。完全に動くようになりました。
これはvalue="+siteID+"の外側にもダブルクォーテーションがあるのは問題無いのでしょうか?

あと、上記のコードを記載するとウィンドウが新しく開かなくなってしまいました。
一つのウィンドウが切り替わる形式になっておりますが、こちらは修正できるのでしょうか?

もし余力が御座いましたら教えて頂ければ幸いにございます。

回答No.1

warpspace

siteIDはセレクタに使用できないので、if文で判定する必要がありますから次のようになります。

$(function(){
　$(".counter").click(function () {
　　var siteID =$(this).attr("value");
　　$(".counter").each(function() {
　　　if ($(this).attr("value")==siteID) {
　　　　$(this).css("background-color","#000");
　　　}
　　});
　});
});

お礼

有難うございます。

こちらはループを回してクリックしたvalueの値を持つ要素の背景色を変化させられたんですね。
上記の方のスクリプトもそうでしたが、href属性の中にURLを入力し、実際に動作させて見たのですが、
最初に開いたウィンドウがそのまま切り替わる状態になってしまいました。