• 締切済み

文字色変更のJsが適応されません。

fujillinの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.4

ANo3です >「:」とはどんな意味があるのでしょうか セレクタの記述方法は基本的にCSSの記法に準ずるようになっています。 「:」は要素を修飾するセレクタの記法で、a:linkや a:hoverと同様です。 ただし、ご使用の「:input」はCSSにはありません。 jQueryによる拡張で、form内の子要素全体を表すものとされています。 (Selects all input, textarea, select and button elements.) ANo3で紹介したサイトはjQueryのドキュメンテーションサイトですので、大概のことはそこで調べることができます。(というか、そこに無い情報は他にも無いといって良いでしょう)  http://api.jquery.com/category/selectors/  http://api.jquery.com/input-selector/

関連するQ&A

  • jQueryで文字数カウンタ(複数対応)

    jQueryのプラグインを作成中です。 指定したテキストフォーム、テキストエリア内の文字数をカウントして、 指定場所に文字数を表示させるというものです。 下記のように記述し、 (function(jQuery) { jQuery.fn.textCount = function(options) { //キーボードが押された時にカウント jQuery(this).live("change keyup",function(){ var count = jQuery(this).val().length; var disp_area = jQuery(this).attr("id"); jQuery("."+disp_area).html(count+"文字"); }); return this; }; })(jQuery); jQuery(".counter").txtCount(); とHTML内で宣言しました。 <textarea id="sample">ここの文字数が</textarea> <div class="sample">ここに表示</div> と、ここまではうまくいきました。 が、テキストエリアの数が複数個あり、数が変動するため、IDを配列にしたいと思っています。 そこで、 <textarea id="sample[1]">個々の文字が</textarea> <div class="sample[1]">ここに表示されない</div> のように記述しました。 すると文字数が表示されなくなってしまいました。 classやidに配列指定はできないのでしょうか。 また、この場合はどのように宣言するのが正しいのでしょうか。

  • function()は無名関数?

    jqueryの$(function() は無名関数だと思いますが、redyが省略されているので、DOMを読み込み終わってから実行とも聞きます。 両方の意味があるのでしょうか? 一見ダダの無名関数に見えますがどのように区別するのでしょうか? 下記の部分もfunction()があるのですがこちらもまた無名関数のなのですか? ただ即時関数ではないので変数などに入れて、関数の呼び出しをしないといけないのにその記載がなくても実行されるのはなぜでしょうか? each(function() $(function() { $(".textbox").each(function(){ var labelText = $(this).val(); $(this).focus(function(){ if( $(this).val() == labelText ){ $(this).val(""); } }).blur(function(){ if( $(this).val() =="" ){ $(this).val(labelText); } }); }); }); 補足 $(".textbox").each(function(){ var labelText = $(this).val(); $(this).focus(function(){ if( $(this).val() == labelText ){ $(this).val(""); の部分は無名関数の中身、つまりこの関数が実行されるときの中身のことなのでしょうか? jqueryだと何となくこの書き方をしているのですがJSの基礎で考えるとそのようになりますよね?

  • ime入力中にcssを変更する方法

    googleのように文字を入力したら、cssを変更して レイアウトを変更したいと考えております。 現在、jqueryを使ってcssを変更しているのですが、 firefoxで一文字目を入力すると表示されな現象に陥りました。 どなたかわかる方、ご教授お願いいたします。 <js>-------------------------------------------------------------------------------- $(function(){ var q=$('input#q'); q.focus(); q.keyup(function(e){ e.preventDefault(); ajax_search(); }); //Firefox IME q.bind('text',function(e){ e.preventDefault(); //console.log(this.value); ajax_search(); }); function ajax_search(){ if(q.val().length>0){ if(!$('#body').hasClass('search')){ q.css({margin:0,position:'absolute',top:'100px','zIndex':'999'}); } $('div#body').addClass('search'); } } }); </script> <html>-------------------------------------------------------------------------------- <div id="body"> <input type="text" name="q" id="q" value="" /> </div>

    • ベストアンサー
    • AJAX
  • テキストフィールドの値に変更があったら

    テキストフィールド(start_date)では、 $("#start_date").datepicker({dateFormat:'yy-mm-dd'}); として日付入力をします。 その日付フィールドに変更があったら、ajaxaで処理をしたいのです。 そこで、jsに $(document).ready(function() { $(".start_date").change(function(){ var d=$(this).val(); var dataString = 'start_date'+ d; $.ajax({ type: "POST", url: "ajax_org.php", data: dataString, cache: false, success: function(html){ $(".org_id").html(html); } }); }); }); と記述し、変更があったらajax_org.phpを読んで、セレクトボックスの内容を変更させようと しているのですが、このajax_org.phpにテキストボックスの内容がPOSTされないのです。 セレクトボックスに変更があった場合には、valの値が、上記の記述でPOSTで読めるのですが、 なにがいけないのでしょうか? ご教授お願いします!!

    • 締切済み
    • PHP
  • jQueryのfocus,blurが機能しません。

    初めまして。jquery初心者です。宜しくお願いします。 フォームの入力項目に『検索したい言葉を入力してください』だとか、『お名前を入力してください』というテキストが薄い色で入っていて、テキスト内をクリックして入力状態になると、中のテキストが消えるというしくみをjQueryでやっているのですが、上手く行きません。 <HTML> <form name="form1" method="post" action="https://www.rescue.ne.jp/form/mail.cgi"> <p> <label for="namae">お名前</label> <input class="guideText" type="text" name="namae" id="namae" value="お名前を入力してください。"> </p> <p> <label for="email">メールアドレス</label> <input class="guideText" type="text" name="email" id="email" value="メールアドレスを入力してください。"> </p> <p> <label for="comment">お問い合わせ内容</label> <textarea class="guidetext" name="comment" id="comment">メッセージを入力してください。</textarea> </p> <p> <input type="submit" name="button" id="button" value="お問い合わせ送信"> </p> </form> 一番上の『お名前を入力してください。』の部分だけ機能しますが、文字の色が 最初サイトを開くと黒になり、テキストをクリックすると文字が消え、フォーカスを外すと薄いグレーになります。これを、最初から薄いグレーで表示させたいのと、『メールアドレス』『お問い合わせ内容』も同じようにfocus,blurを適用させたいです。 // JavaScript Document $(function(){ $('.guideText').each(function(){ var guideText = this.defaultValue; var element = $(this); element.focus(function(){ if(element.val()===guideText){ element.val(''); element.removeClass('guide'); } }); element.blur(function(){ if(element.val()===''){ element.val(guideText); element.addClass('guide') } }); if(element.val()===guidetext){ element.addClass('guide'); } }); }); <HTML>では、class="guidetext"とすべて適用させてるのに上手く機能しません。 自分では限界なので相談させていただきました。 どうか、宜しくお願い致します。

  • JS 頭文字が大文字について

    JS初心者ですが、頭文字が大文字の場合と小文字の場合の 違いはあるのでしょうか? <script type="text/javascript"> <!-- function Userpage とかで <input type="radio" name="_userpage" value="0" onclick="Userpage(this)"> functionとonclickの頭文字が大文字なのですが なんでこうするのでしょうか? 頭文字を小文字に変更してダメとか、functionとonclickを揃えるとか。 ---------------------------- ここの質問ページも function changeAction(p,t) function querySubmit(f, v) とか、一部大文字になってたり。

  • このjsはどういうことですか?

    function handleFiles(files) { l("アイコン変更!!1"); if (files.length > 0) { l("アイコン変更!!2"); var file = files[0]; if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) { l("アイコン変更!!3"); var reader = new FileReader(); reader.onload = function(evt) { load(evt.target.result) } ; reader.readAsDataURL(file) } } } function load(src) { l("アイコン変更!!load"); img = new Image(); img.onload = function() { analyze() } ; img.src = src } function analyze() { l("アイコン変更!!analyze"); if (!img) return; SmartCrop.crop(img, { width: 100, height: 100, debug: false }, draw) } function draw(result) { l("アイコン変更!!draw"); selectedCrop = result.topCrop; drawCrop(selectedCrop) } function drawCrop(crop) { l("アイコン変更!!drawCrop"); canvas.width = 100; canvas.height = 100; ctx.drawImage(img, crop.x, crop.y, crop.width, crop.height, 0, 0, canvas.width, canvas.height); img_src = canvas.toDataURL(); var img_tag = $('<img>').attr('src', img_src); $('#file_span').html(img_tag); $('#b_change_profile').prop('disabled', false) } function img_selected_clear() { $('img.selected', '#icon_table').each(function() { $(this).removeClass('selected') }) } function emit_change_icon_name() { var data = {}; data.selected_my_icon = selected_my_icon; data.character_name = $("#ipt_change_character_name").val(); socket.json.emit('change_icon_name', data) } $(function() { $('#canvas_wrap').hide(); $('#i_file').change(function(e) { handleFiles(this.files) }); 回答できる方、回答よろしくお願いします。 できれば一つずつ解説してもらえると嬉しいです。

  • JSについて教えてください

    現在ドットインストールというサイトでJavaScriptを勉強しています 今割り勘電卓という物を作っています 完成はしていませんが以下のコードは打ち込まれた数字がきちんと取得されているかを確かめている段階です。 ですがconsole.logに表示されませんなぜでしょうか? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <head> <body> <h1>割り勘電卓</h1> <p>支払額:<input type = "text" id = "amount"></p> <p>人数:<input type = "text" id = "num"></p> <p><input type = "button" value = "計算" onclic = "getResult();"></p> <p id = result></p> <script> function getResult(){ var amount = document.getElementById('amount').value; var num = document.getElementById('num').value; console.log(amount); console.log(num); } </script> </body> </html>

  • jQueryを使ってランダムに表示

    jQueryを使って5つのボックス要素を、ランダムに3つ表示させています。 現在はページを読み込むたびに表示を切り替えていますが、これを「一定時間で表示を切り替え」に変更する事は可能でしょうか? できればjsのみの修正でできれば良いのですが…。 どなたかお助けください。よろしくお願いいたします。 jsとhtmlは以下のようにしています。 jQuery(function($) { $.fn.extend({ randomdisplay : function(num) { return this.each(function() { var chn = $(this).children().hide().length; for(var i = 0; i < num && i < chn; i++) { var r = parseInt(Math.random() * (chn - i)) + i; $(this).children().eq(r).show().prependTo($(this)); } }); } }); $(function(){ $("[randomdisplay]").each(function() { $(this).randomdisplay($(this).attr("randomdisplay")); }); }); }); <div randomdisplay="3"> <div id="box">ランダム1</div> <div id="box">ランダム2</div> <div id="box">ランダム3</div> <div id="box">ランダム4</div> <div id="box">ランダム5</div> </div>

  • enchant.js によるゲーム開発

    enchant.jsを使ってゲームを作っています。 敵を作り、ボスを表示するまで、たどり着きましたが、 ボスに攻撃を当てようと玉を打つと止まります。 playerShootクラスの処理を消すと打つことはできますが、ボスに攻撃をあてることはできません。 なので、原因はplayershootクラスにあると考えていますが、 うまくいかず、アドバイスをいただけないでしょうか? //プレイヤーが撃つ弾のクラス var PlayerShoot = enchant.Class.create(Shoot, { initialize: function(x, y){ Shoot.call(this, x, y, 0); //弾のサイズ this.width = 15; this.height = 15; this.image = game.assets['images/playerShoot.png']; this.addEventListener('enterframe', function(){ if(boss.intersect(this)){ //ライフが0でなければ小爆発 if(bosslife > 0){ this.remove(); bosslife --; var miniblast = new MiniBlast(this.x, this.y); //ライフが0になったら大爆発 }else{ var ultrablast = new UltraBlast(boss.x, boss.y); game.rootScene.removeChild(boss); this.remove(); } } }); } });