セレクタの指定について質問です
- JavaScriptを独学で勉強中です。セレクタの指定に変数を使用しても良いでしょうか？
- jQueryを使用してKeyCodeに対応した文字の色を変えるプログラムを作成していますが、他にもっと良い方法はあるでしょうか？
- 問題なく動作しているようですが、初心者ほど疑問に思うもので、他にもっと良い方法があるのか不安です。
- ベストアンサー
セレクタの指定について質問です
セレクタの指定について質問です JavaScriptを独学で勉強中です。 いつも動くようにできるのですが、他にもっといい方法があるんじゃないかと悩みます。。 動くんだったらいいじゃないかと言われるんですが、初歩的なことほど、ホントにこれでいいのかなぁと考えてしまいますので、質問させてください。 初歩中の初歩なんですが、セレクタの指定に変数を使用してもいいんでしょうか？ こんな感じです。 var char_id = 'span#' + character.toLowerCase(); $(char_id).addClass('down'); jQueryを使用してKeyCodeに対応した文字の色を変えるプログラムを作成しています。 IE8で確認したところ、期待通りに動くんですが、こんな書き方でいいんでしょうか？ また、他にこんなやり方もある場合は教えてください。 よろしくお願いします。 <html> <head> <style type="text/css"> <!-- .down{ background: #f00; color: #fff; border: 1px solid #f9f9f9; } --> </style> </head> <body> <span id="a">a</span> <span id="b">b</span> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> <!-- $(function(){ $(document).keydown(function(e){ $('span').removeClass('down'); if (e.which == 65 || e.which == 66) { var character = String.fromCharCode(e.which); var char_id = 'span#' + character.toLowerCase(); $(char_id).addClass('down'); } }); }); // --> </script> </body> </html>
- tabi_cat85
- お礼率100% (3/3)
- JavaScript
- 回答数2
- ありがとう数6
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
セレクタの指定に変数を使用してもいいんでしょうか？ ＝＞ jQueryのドキュメントにそこまで、書き下ろしてないけど、 別にかまわないはずです。$jquery()に渡せるの物は、 http://api.jquery.com/jQuery/ この方法だと、そこらじゅうに<span id="a"></span> を書く必要があるうんじゃ？、id="a"が重複しちまうぞ。 それでもいいという仕様なら、いいですけど。
その他の回答 (1)
- babu_baboo
- ベストアンサー率51% (268/525)
こんにちは。 かいとうではありません。 > JavaScriptを独学で勉強中 とあるので、jquery をつかわずに、かいてみたら？ それが「もっといい方法」につながるかも？
お礼
ご指摘ありがとうございます！ 確かにJavaScript＋CSSで十分実現できるんですけど、ｊQueryはかなり便利なんです。 使いこなせると開発効率アップするだろうなって思うんで、勉強中です。 ありがとうございました！
関連するQ&A
- AtomでjQueryは使えますか？
ローカルフォルダ内にindex.html、contact.html、style.css、contact.css、script.js、5つのファイルを作成し、Atomでコーディング中です。 index.htmlとcontact.htmlの<head></head>内で<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>とし、</body>直前で<script src="./script.js"></script>、又、script.jsに$(function(){この中にコード});と記述。 (1)まずここで質問ですが、これでjQueryの使用環境は整ってますでしょうか？ 続きまして、先ほどの質問内容とは違ってしまいますが、アコーディオン作成のため、index.html内の <div class="qa"> <h1 class="question-text"> <span class="fa fa-question-circle"></span> 名前は何ですか？ </h1> <span id="up" class="fa fa-angle-up"></span> <p class="answer-text">ほげほげです。</p> </div>に対してscript.jsにて $('.question-text').click(function(){ var $answer=$(this).parent().find('.answer-text'); if($answer.hasClass('open')){ $answer.removeClass('open'); $answer.slideUp(); $(this).parent().find('#down').html('<span id="up" class="fa fa-angle-up"></span>'); }else{ $answer.addClass('open'); $amswer.slideDown(); $(this).parent().find('#up').html('<span id="down" class="fa fa-angle-down"></span>'); } }); と記述。→グーグルのブラウザで確認。→クリックしても動かない。 という状況です。 (2)ここでまた質問ですが、(1)の時点でjQuery使用環境が整っていれば、動かない理由は単に私のコードが間違っている事になる訳ですが、どうでしょうか・・・？ ご意見賜りたくお願い申し上げます。
- 締切済み
- JavaScript
- 表示・非表示のスクリプトで、複数指定する場合はどうしたらいいですか？
複数のコンテンツをボタンクリックにて表示・非表示にしたいのですが、うまくいきません。 なんとか、2つまではわかったのですが、3つまで表示すると3つ目が非表示になってくれません。 最終的には5つくらいを下記のスクリプトで行いたいのですが、どうすれば、複数のIDを対応させることができますか？ ●例えば、test1を押した際、test2と3は非表示としたいです。 <script language="JavaScript" type="text/JavaScript"> <!-- function ChDsp2(strShow,strHidden){ var obj=''; obj=document.all && document.all(strShow) || document.getElementById && document.getElementById(strShow); obj.style.display = "block"; obj=document.all && document.all(strHidden) || document.getElementById && document.getElementById(strHidden); obj.style.display = "none"; } //--> </script> <a href="javascript:ChDsp2('text1','text2');">1を表示</a> <a href="javascript:ChDsp2('text2','text1');">2を表示</a> <a href="javascript:ChDsp2('text3','text1');">3を表示</a> <span id="text1" style="display:block;">111111</span> <span id="text2" style="display:none;">222222</span> <span id="text3" style="display:none;">333333</span> どなたか教えてください。お願いします。
- ベストアンサー
- JavaScript
- mootoolsとjQueryの共存がうまくいかない。
mootoolsとjQueryの共存がうまくいかない。 ▼共存参考サイト http://h2ham.seesaa.net/article/106053238.html 参考サイトを見て、共存したいのですが、Operaでうまくいきません。 IE、fox、safari、chromeではうまくいくのですが・・・ $をj$などに変えてみたりいろいろ試しましたがうまくいきませんでした。 お力添えよろしくお願いします。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../js/yuga.js" charset="utf-8"></script> <script type="text/javascript" src="../js/jquery-easing-1.3.pack.js"></script> <script type="text/javascript" src="../js/jquery-easing-compatibility.1.2.pack.js"></script> <script type="text/javascript" src="../js/coda-slider.1.1.1.pack.js"></script> <script type="text/javascript"> var theInt = null; var $crosslink, $navthumb; var curclicked = 0; theInterval = function(cur){ clearInterval(theInt); if( typeof cur != 'undefined' ) curclicked = cur; $crosslink.removeClass("active-thumb"); $navthumb.eq(curclicked).parent().addClass("active-thumb"); $(".stripNav ul li a").eq(curclicked).trigger('click'); theInt = setInterval(function(){ $crosslink.removeClass("active-thumb"); $navthumb.eq(curclicked).parent().addClass("active-thumb"); $(".stripNav ul li a").eq(curclicked).trigger('click'); curclicked++; if( 5 == curclicked ) curclicked = 0; }, 15000); }; $(function(){ $("#main-photo-slider").codaSlider(); $navthumb = $(".nav-thumb"); $crosslink = $(".cross-link"); $navthumb .click(function() { var $this = $(this); theInterval($this.parent().attr('href').slice(1) - 1); return false; }); theInterval(); }); </script> <script type="text/javascript"> <!-- jQuery.noConflict(); var j$ = jQuery; --> </script> <script src="../js/mootools.js" type="text/javascript"></script> <script src="../js/menu.js" type="text/javascript"></script> <script src="../js/main.js" type="text/javascript"></script>
- ベストアンサー
- JavaScript
- prototype+jquery+プラグイン
prototype.jsとjqueryとプラグイン系の読み込み方が良くわかりません。 クロスブラウザ対応のMP3プレイヤーを導入したく追加したのですが 順番を並べ変えたりいろいろしましたが導入する事ができずにこまっています。 何かいい方法はないでしょうか？ エラーの内容も順序によって様々です・・・・ <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="lightbox.js"></script> <script type="text/javascript" src="lightbox_shortcut_keys_addon.js"></script> <script type="text/javascript" src="slide3/script/jquery-1.2.2.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.jcarousel.pack.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; </script> 以下追加===================================================== <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.compat-1.3.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; $j(document).ready(function(){ $("#mp3").jPlayer(); }); </script>
- 締切済み
- JavaScript
- jQueryについて質問です。
jQueryについて質問です。 複数のプラグインを一つのページに組み込み同時に使いたいのですが、 それぞれが干渉しているのかどれか一つしか使えません。 http://solidstate.jp/Navigation/treeMenu/script_54.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html http://solidstate.jp/Navigation/houseOfCake/script_172.html こちらに紹介されている記事を参考に <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.navigmenu.js"></script> <script type="text/javascript"> $(function(){ $('#menu').navigmenu(); }); </script> <script type="text/javascript" src="accordian.pack.js"></script> <script type="text/javascript"> window.onload = function() { new Accordian('basic-accordian',5,'header_highlight'); } </script> <script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/jquery.cookie.js" type="text/javascript"></script> <script src="jquery.treeview.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#filetree").treeview({//ターゲットとなる要素に付加するID animated: "fast", //アニメーション設定（削除するとアニメ無し） collapsed: true, //開閉設定（削除するとロード時にメニューを全開） unique: true, //動作設定（削除すると自動的に閉じなくなる） persist: "cookie", //Cookie }); }); </script> このような記述を行いました。 ですが、動くのはひとつだけです。 これらを同時に動かすにはどうすればよいでしょうか？ 優先順位は上からです。
- ベストアンサー
- JavaScript
- jQueryでcookie 追加書き込み
jQueryでcookieに追加書き込みをしたいのですが、どうやってもわかりません。 ここからクッキを追加書き込みを実現したいのですが、 どうやっても頭が回らず困って、混乱気味になっています。 誰か助けてください！ おねがいいたします！ <!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7.1");</script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript"> //入力された値をCookieに保持する function cookie(){ $.cookie("cookie", $("#cookieValue").val()); $("#result").html($.cookie("cookie")); } //現在のCookieの値を出力 $(function() { $("#result").html($.cookie("cookie")); }); </script> <title></title> </head> <body> <input id="cookieValue" type="input"> <a href="index.html" onclick="ｃookie()">クッキー</a> <p><span id="result"></span></p> </body> </html>
- ベストアンサー
- JavaScript
- ownerDocumentの使い方を知りたいです。
javascriptの.ownerDocumentの使い方を知りたいです。 https://developer.mozilla.org/ja/DOM/element.ownerDocument のサイトを参考に実際にいろいろ試してみました。 ーーーーーーーーーーーーーーーーーーーーー <script type="text/javascript"> function test1() { var a = 123; var b = a.ownerDocument; document.write(b); } </script> <div> <span onclick="test1()">テスト</span> </div> ーーーーーーーーーーーーーーーーーーーーー <script type="text/javascript"> function test2() { var a = this.ownerDocument; document.write(a); } </script> <div> <span onclick="test2()">テスト</span> </div> ーーーーーーーーーーーーーーーーーーーーー <script type="text/javascript"> function test3() { var a = this; var b = a.ownerDocument; document.write(b); } </script> <div> <span onclick="test3()">テスト</span> </div> ーーーーーーーーーーーーーーーーーーーーー 全てundefinedとなり、そのまま固まってしまいます。 .ownerDocumentはどのように使うのでしょうか。 アドバイスをよろしくお願いします。
- ベストアンサー
- JavaScript
- クラスのcolor 「#ff0000;」を表示
ＣＳＳのクラスsampleのcolor 「#ff0000;」を表示する方法を教えてください。 // cssの部分 .sample ｛ color: #ff0000; ｝ // html内 ＪａｖaScriptの部分 <script type="text/javascript"> function () { var element = document.getElementById("sample"); var samplecolor = element.style.color; } </script> <span id="samplecolor"></span> //----------結果------------------- #ff0000;
- ベストアンサー
- JavaScript
- 変数をテキストボックスに入れるには?
javascriptでゲームを作っています。 <dlv class='userinfo' style='display:none;'><span class='alias'></span></dlv> でユーザー名が拾えます。 <script type="text/javascript"> document.write("<dlv class='userinfo' style='display:none;'><span class='alias'></span>さん。ようこそ</dlv>"); </script> これで、「高橋さん。ようこそ」と表示されます。 次に、この「高橋」をフォームに入れることを考えました。 そこで下記のように作ったのですが、フォームの中は「undefined」になってしまいます。 <script type="text/javascript"> var abk; abk = document.write("<dlv class='userinfo' style='display:none;'><span class='alias'></span></dlv>"); document.getElementById('cla2').value = abk; </script> <input typy="text" id="cla2" value=“"> 次に下記のように作ったのですが、フォームの中は空です。 <script type="text/javascript"> var abk; abk = document.write("<dlv class='userinfo' style='display:none;'><span class='alias'></span></dlv>"); $("#text44").val(abk); </script> <input typy="text" id="text44" value=“"> どうすれば、 document.write("<dlv class='userinfo' style='display:none;'><span class='alias'></span></dlv>"); で表示される文字をフォームの中に記載することが可能になるでしようか?
- ベストアンサー
- JavaScript
- jQueryで質問です。
jQueryで質問です。 オブジェクトA、Bがあるとします。 Aをドラッグすると、mousedownかdragstartの段階で要素がBに置き換わってドラッグさせるような動きは可能でしょうか。 作成中のソースを記載します。 <html> <head> <title>test</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./ui/jquery.ui.core.js"></script> <script type="text/javascript" src="./ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="./ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="./ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="./ui/jquery.ui.droppable.js"></script> <script type="text/javascript"> $(function(){ obj1 = $("#box"); obj2 = $('<div style="width:200px;height:200px;background:red;">B</div>'); obj1 .mousedown( function(){ obj1.replaceWith(obj2); obj2.draggable(); } ); }); </script> </head> <body> <div style="width:200px; height:100px; background: #cccccc;" id="box">A</div> </body> </html> これだと、Aのドラッグを一度解除して、Bをドラッグすると上手くいきますが、1回のモーションでBをドラッグさせたいのです。 宜しくお願いします。
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます！ 返事が遅くなってすみませんでした。 > jQueryのドキュメントにそこまで、書き下ろしてないけど、 そうなんですよ。 使っちゃいけないのかと思って心配になりました。。 > id="a"が重複しちまうぞ。 ですよね。（笑 この辺もどうやろうか考え中です。 ありがとうございました！