タグ付けされた質問 「jquery」

最近、PHPStorm IDEのバージョンをアップグレードしましたが、jQueryの非効率的な使用について警告しています。 例えば： var property_single_location = $("#property [data-role='content'] .container"); この警告を表示します： jQueryセレクターが効率的に使用されていることを確認します。IDセレクターで始まる子孫セレクターを分割することを提案し、キャッシュされる可能性のある重複したセレクターについて警告します。 だから私の質問は： なぜこれが非効率的であり、上記のセレクターを行うための効率的な方法は何ですか？ 私は推測します： var property_single_location = $("#property").find("[data-role='content']").find(".container"); これは正しい方法ですか？

100 jquery  jquery-selectors  performance 

私はRequireJSを使用しており、DOM上で何かを初期化する必要があります。現在、RequireJSはdomReadyプラグインを提供していますが、jQueryがすでにあるので、jQuery $(document).ready()が必要になったため、これを利用できます。 だから私は2つのオプションを持っています： domReadyプラグインを使用します。 require(['domReady'], function (domReady) { domReady(function () { // Do my stuff here... }); }); 使用$(document).ready()： $(document).ready(function() { // Do my stuff here... }); どちらを選択する必要がありますか。その理由は何ですか。 どちらのオプションも期待どおりに動作するようです。RequireJSがその魔法をやっているので、jQueryのものには自信がありません。つまり、RequireJSはスクリプトを動的に追加するので、動的に要求されたすべてのスクリプトが読み込まれる前にDOMレディが発生するのではないかと心配しています。一方、RequireJSは、domReadyjQueryがすでに必要な場合にのみ、追加のJSに負担をかけます。 ご質問 domReadyjQueryを使用できるのに、なぜRequireJSがプラグインを提供するの$(document).ready();ですか？別の依存関係を含めることの利点はありません。 ニーズを満たすだけの場合は、クロスブラウザAJAXに提供してみませんか？ 私の知る限りでは、必要なモジュールdomReadyは、ドキュメントの準備が整った後にフェッチまたは実行されることはなく、jQueryを必要とする同じことを行うこともできます。 require(['jQuery'], function ($) { $(document).ready(function () { // Do my stuff here... }); }); ：私の質問に、より明確にするために必要と違い何domReadyかがjQuery？

100 javascript  jquery  html  requirejs  document-ready 

TL; DR：Stickyは、JavaScriptを使用して加えた変更に実際に反応できますか？もしそうなら、どうですか？ （プロジェクトはFoundation 6.2とWordPress 4.4を使用しており、テーマはNode.js / npmとgulp 4.0を使用してインストールされています。私の質問は、詳細には太字でマークされています。） navFoundationのスティッキープラグインを使用してバーをスティッキーにしたいのですが、ボタンをクリックしたときだけです。つまり、DOMがすべて終了しても、navバーは「それ自体」に固執するのではなく、ドキュメントの一番上の位置に留まります。さらに、下にスクロールすると消えますが、上にスクロールすると固執します。 navバーが正しく、すべての必要に包まれているdivので、S navバーが固執することができます。「追加」の部分で問題が発生します。私のアイデアは、最初にPHPを使用してスティッキーをインスタンス化することでした： <div data-sticky-container> <header class="header" role="banner" id="sticky_header" data-sticky data-top-anchor="1" data-btm-anchor="content:top" data-options="marginTop:0;" style="width:100%" > <?php get_template_part('parts/nav', 'offcanvas-topbar'); ?> </header> </div> その後、data-btm-anchorクリックで起動するJavaScriptを使用して、現在のスクロール位置に変更します。これはうまくいきませんでした。これまでに試したこと： 使用する場合はgetElementByID、その後とsetAttribute、data-btm-anchorPHPファイルの中には、Firebugのに応じて変更を行いますが、それは影響しないnavバーを少し。それはどこにでも留まります。スティッキーを「再インスタンス化」する必要はありますか。 ドキュメントが言及します： JavaScriptでオプションを設定するには、次のようにオブジェクトをコンストラクター関数に渡す必要があります。 var options = { multiExpand: true, allowAllClosed: false }; var accordion = new Foundation.Accordion($('#some-accordion'), options); つまり、既存のプラグインインスタンスに新しいパラメータを渡すことができるということですか。オプションの配列パラメーターとして、Foundation.Sticky異なるbtmAnchorだけを含む新しいオブジェクトをmyに渡してjQuery('#sticky_header')も、何も起こりませんでした。 ドキュメントはまた、私の「sticky_header」にスティッキーを追加するプログラムで提案しています。それがうまくいった場合は、jQueryオブジェクトを直接変更してみることができます。これまでのところ、Stickyプラグインをヘッダーに正常にバインドすることができました。 …

100 javascript  jquery  wordpress  zurb-foundation  zurb-foundation-6 

問題を解決するためのヒントを探しています。 テーブルにhtml要素（選択ボックスの入力フィールドなど）があります。次に、オブジェクトをコピーして、そのコピーから新しいオブジェクトを生成し、それをJavaScriptまたはjQueryで生成します。これは何とかうまくいくと思いますが、現時点では少し無知です。 このようなもの（疑似コード）： oldDdl = $("#ddl_1").get(); newDdl = oldDdl; oldDdl.attr('id', newId); oldDdl.html();

100 javascript  jquery  clone  elements 

ブートストラップとParseフレームワークを使用して、小さなWebアプリケーションを構築しています。しかし、これらのBootstrapモーダルは、閉じた後、本体にパディング権を追加し続けます。これを解決するには？ 私はこのコードを私のJavaScriptに入れようとしました： $('.modal').on('hide.bs.modal', function (e) { $("element.style").css("padding-right","0"); }); しかし、それは機能しません。誰かがこれを修正する方法を知っていますか？ 私のコード： <button type="button" class="btn btn-lg btn-default" data-toggle="modal" data-target="#loginModal">Admin panel</button> <div id="loginModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-sm"> <!-- Modal content --> <div class="modal-content"> <!-- header --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Login</h4> </div> <!-- body --> <div class="modal-body text-center" …

100 javascript  jquery  html  css  twitter-bootstrap 

複数選択があります： <select name='strings' id="strings" multiple style="width:100px;"> <option value="Test">Test</option> <option value="Prof">Prof</option> <option value="Live">Live</option> <option value="Off">Off</option> <option value="On">On</option> </select> データベースからデータをロードします。それから私はこのような文字列を持っています： var values="Test,Prof,Off"; 複数選択でこの値を設定するにはどうすればよいですか？すでに配列内の文字列を変更して複数の値として配置しようとしましたが、機能しません...！誰かがこれを手伝ってくれますか？ありがとう!!!

100 javascript  jquery  multiple-select 

jquery UIダイアログを使用すると、1つを除いてすべてがうまく機能します。ブラウザのサイズが変更されても、ダイアログは最初の位置にとどまるので、非常に煩わしい場合があります。 あなたはそれをテストすることができます：http : //jqueryui.com/demos/dialog/ 「モーダルダイアログ」の例をクリックして、ブラウザのサイズを変更します。 ブラウザのサイズが変更されたときにダイアログを自動的に中央に配置できるようにしたいと思います。これは、アプリ内のすべてのダイアログに対して効率的な方法で実行できますか？ どうもありがとう！

100 jquery  jquery-ui  modal-dialog 

私はiPadベースのWebアプリで作業しています。Webページのように見えないように、オーバースクロールを防ぐ必要があります。私は現在、これを使用してビューポートをフリーズし、オーバースクロールを無効にしています： document.body.addEventListener('touchmove',function(e){ e.preventDefault(); }); これはオーバースクロールを無効にするのに最適ですが、私のアプリにはいくつかのスクロール可能なdivがあり、上記のコードではスクロールできません。 私はiOS 5以上のみをターゲットにしているので、iScrollのようなハッキーなソリューションは避けました。代わりに、スクロール可能なdivにこのCSSを使用しています。 .scrollable { -webkit-overflow-scrolling: touch; overflow-y:auto; } これはドキュメントのオーバースクロールスクリプトなしで機能しますが、divスクロールの問題を解決しません。 jQueryプラグインなしで、オーバースクロールの修正を使用する方法はありますが、私の$（ '。scrollable'）divを免除しますか？ 編集： 私はまともな解決策であるものを見つけました： // Disable overscroll / viewport moving on everything but scrollable divs $('body').on('touchmove', function (e) { if (!$('.scrollable').has($(e.target)).length) e.preventDefault(); }); divの先頭または末尾を超えてスクロールしても、ビューポートは移動します。それを無効にする方法も見つけたいのですが。

100 jquery  ios  ipad  safari  mobile-website 

モバイルWebアプリケーションで使用する一連のカスタムjQueryイベントを作成しました。それらは素晴らしい働きをし、テストされています。しかし、私は理解できない問題がある小さな問題に遭遇しました。 .clone()ボタンを含むDOM内のいくつかの要素を使用しています。ボタンにはいくつかのカスタムイベントがバインドされています（イベントはを使用してバインドされます.on()）。残念ながら、jQueryを使用する.clone()と、バインディングが保持されないため、再度追加する必要があります。 誰かが以前にこれに遭遇したことがありますが、誰かが回避策の可能性を知っていますか？使用する.on()ことで、現在または将来存在する要素のバインディングが保持されるはずだと思いましたか？

100 javascript  jquery 

DIVを別のDIVにコピーし、これが可能であることを期待して、jqueryの助けが必要です。次のHTMLがあります。 <div class="container"> <div class="button"></div> </div> 次に、ページの別の場所に別のDIVがあり、 'button' divを次の 'package' divにコピーしたいと思います。 <div class="package"> Place 'button' div in here </div>

100 javascript  jquery  html 

Excelシートをクリックしているときと同じように、ブラウザで画像ファイルをダウンロードする必要があります。 クライアント側のプログラミングのみを使用してこれを行う方法はありますか？ <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="Scripts/jquery-1.10.2.js"> $(document).ready(function () { $("*").click(function () { $("p").hide(); }); }); </script> </head> <script type="text/javascript"> document.onclick = function (e) { e = e || window.event; var element = e.target || e.srcElement; if (element.innerHTML == "Image") { //someFunction(element.href); var name = element.nameProp; var address …

100 javascript  jquery  html 

「ID、名前」ペアを持つドロップダウンがあります。 例 ジョンミラー ジムスミス ジェンモーシン Jon MIllerのIDは101、 Jim SmithのIDは102、 Jen MorsinのIDは103 私が次のことをすると： var arNames = $('#Crd').val() ジョンミラーを選択すると101が表示されます。ジョンミラーを取得したいのですが。

100 jquery 

値としてJSONオブジェクトを持つ変数があります。この変数を他の変数に直接割り当てて、同じ値を共有するようにします。これがどのように機能するかです： var a = $('#some_hidden_var').val(), b = a; これは機能し、どちらも同じ値です。mousemoveイベントハンドラーを使用bして、アプリ全体を更新します。ボタンをクリックbすると、元の値、つまりに保存されている値に戻したいのですがa。 $('#revert').on('click', function(e){ b = a; }); 私は、同じ使用する場合は、この後にmousemoveイベントハンドラを、それは両方を更新aし、b以前のそれが唯一の更新されたときに、b予想通り。 私はこの問題に困惑しています！ここで何が問題になっていますか？

100 javascript  jquery 

JSの新品。 jQuery / JavaScriptでフォームを送信するときに、ファイルinput要素が空かどうかを確認しようとしています。たくさんの解決策を試してみましたが、何もうまくいきません。/c/fakepath（他に選択肢がない限り）私は避けようとしています <input type="file" name="videoFile" id="videoUploadFile" /> これは動作しません： var vidFile = $("#videoUploadFile").value; ファイル名を取得できる唯一の方法は、以下を使用する場合です。 var vidFile = document.getElementById("videoUploadFile").files[0].name; 利用可能なファイルがない場合、コードはエラーをスローします。 未定義のプロパティ名を読み取れません 配列が設定されていないため、これは理にかなっています。しかし、これでエラー処理を行う方法を理解できません。 ファイルの入力要素を適切に取得し、videoUploadFileそれが空かどうかを確認し、空の場合はエラーメッセージをスローする方法を教えてください。

100 javascript  jquery  html 

ユーザーがフィールドにカーソルを合わせたときに、この派手な小さなJavaScriptを使用してフィールドを強調表示しています。onclickリンクとして機能する機能を追加してURLに行く方法があるか教えていただけませんか？ <script> $(function() { $('tr').hover(function() { $(this).css('background-color', '#eee'); $(this).contents('td').css({'border': '0px solid red', 'border-left': 'none', 'border-right': 'none'}); $(this).contents('td:first').css('border-left', '0px solid red'); $(this).contents('td:last').css('border-right', '0px solid red'); }, function() { $(this).css('background-color', '#FFFFFF'); $(this).contents('td').css('border', 'none'); $('a#read_message.php').click(function(){ URL(); }); }); }); </script>

100 javascript  jquery  hyperlink