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"></sc …
<script>
$(function(){
$(".counter").click(function () {
siteID =$(this).attr("value");
$(".counter([value=siteID])").css("background-color","#000");
});
});
</script>
何とかvalueの値を取得することは出来たのですが、その後の動作がわかりません。
上記の方法で解決するかと思えたのですが、ここから先が進みませんでした。
試しに背景色のみを同じ値を持つ要素を書き換えようと思っております。
どちらかご教授頂ければ幸いに御座います。
No.1
- 回答日時:
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を入力し、実際に動作させて見たのですが、
最初に開いたウィンドウがそのまま切り替わる状態になってしまいました。
No.2ベストアンサー
- 回答日時:
とりあえず動く様に修正
$(function(){ $(".counter").click(function(){
// var を使うこと。グローバル領域汚染防止のため
var siteID = $(this).attr("value");
// JavaScriptに埋め込み変数構文はないので文字列連結
$(".counter[value=" + siteID + "]").css("background-color","#000");
// 動作確認のためにリンク動作を抑制する false を返す
return false;
}); });
有難うございます。完全に動くようになりました。
これはvalue="+siteID+"の外側にもダブルクォーテーションがあるのは問題無いのでしょうか?
あと、上記のコードを記載するとウィンドウが新しく開かなくなってしまいました。
一つのウィンドウが切り替わる形式になっておりますが、こちらは修正できるのでしょうか?
もし余力が御座いましたら教えて頂ければ幸いにございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(IT・Webサービス) html cssについて 3 2023/05/13 12:48
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
質問に答えていくと、回答によ...
-
どの<li><a> が押されたか判別...
-
jQueryのhide,showで中の要素が...
-
固定ナビのJqueryのアコーディ...
-
チェックボックスに入っている...
-
jQuery タブメニューへのダイ...
-
【jQuery】遅延実行(タイムラ...
-
MAX関数を使ってからLEFT JOIN...
-
JSPでの画像ファイル表示
-
javascriptテキストBOX色を元に...
-
背景色を透明化
-
Slick.jsのオプションrtlについて
-
VBScript+IEのチェックボック...
-
テキストエリア内の一部の文字...
-
getElementByIdの戻り値がnull...
-
removeEventListenerについて
-
createElementで作成した要素を...
-
css固定したフッターが本文と重...
-
クリックで色変更後に既に変更...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
javascriptでEnterキーをtabキ...
-
クリックした<a>タグのみにClas...
-
チェックボックスに入っている...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
「jQuery」アコーディオンメニ...
-
jQueryで、リンクURLの一致を確...
-
jQueryのeqで最後からn番目以降...
-
ネストされたチェックボックス...
-
javascriptで、クリックしたら...
-
onmouseoverの表示切り替えが上...
-
文字と数字が混在する要素のsor...
-
jQueryでネスト構造の<li>がク...
-
タブメニューを上下に設置
-
<li></li>の数を制限
-
jQuery多層式アコーディオンメ...
-
どの<li><a> が押されたか判別...
-
CSSとJavaScriptを使ってドロッ...
-
複数の画像をランダム(シャッ...
おすすめ情報