問題タブ [dom-manipulation]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - テンプレート vs DOM 作成 - 非常に動的なインターフェース
私は PHP から JavaScript に移行しましたが、これはサーバー側でも使用したいと考えています。どちらの方法でもユーザーに JavaScript を要求するので、JavaScript を多用します。私はオブジェクト指向の方法で使用したいのですが。
MVC を考慮すると、モデルはクライアント側とサーバー側の両方で使用されます。ビューはクライアント側でのみ使用されます。インターフェースは、メインのサイドメニュー、メインのコンテンツ、およびいくつかのウィジェットの複数の部分に分割されています。例として、既に行った部分を取り上げます。メニューは、複数のエントリを持つ 3 つのカテゴリに分割されています。各エントリは、アクション (コンテンツの切り替えなど) が添付されたリンクです。
現時点では、View はテンプレート パーサー用のデータを作成するための toData() メソッドを備えた複合体です (自作、単純ですが反復をサポートしています)。そして、アクションは作成後に添付されます。フレームワークとして jQuery を使用します。
リンクの反復処理を避けるために、actionhandler を宣言しました。
私はこのソリューションに満足していません。柔軟性が十分ではありません。ビューを実際の複合体のように扱いたいのですが、多くの奇妙な依存関係はありません。また、一部を変更すると、ビュー全体を再解析する必要があります。この例では、実行中にメニューは変更されませんが、インターフェイスの他の部分は変更されるため、これは明らかではありません。
さて、最終的に私の質問にたどり着きます: より良い解決策はありますか? DOM 参照がビュー全体に広がっているように、各メニューエントリには独自の参照と直接アタッチされたアクションがありますか? テンプレートを使用しなくなった場合、どのような柔軟性が失われますか?
jquery - jqueryでクラスを操作する
値の選択ボックスがあります: apple-80 apple-100 apple-120 apple-300
私は持っている：<body class="fruit apple-120 otherclass anotherclass">
ボディクラス「apple-120」を操作して、フルーツ、その他のクラス、別のクラス、クラスをそのままにして、選択ボックスから選択した値のいずれかに置き換えたいと考えています。
これまでのところ、これを作成しました：
で、〜がある：
これによりクラスが置き換えられましたが、選択ボックスを次にクリックすると、選択オプションの値が新しいクラスとして追加されますが、これは私が望んでいたものではありませんでした。
「apple-120」を新しい値に置き換えたいだけで、追加するのではありません。それ以外のクリックは、同じターゲット クラスを置き換えるだけです。
さらに、すべての選択ボックスの値を取得して、それらのクラスの選択を絞り込む条件として保持したいと考えました。クラスが選択ボックス内のいずれかの値と一致する場合、何かを実行します。
どんなヒントでも大歓迎です。ありがとう。
jquery - 選択ボックスの値に基づいて一部のセレクター クラスを操作する
カスタム jquery プラグインを改善しようとしています。以前ここで質問したことがあります。以前の問題は解決されました。ここで、プラグインをより柔軟にしたいと考えています。したがって、ハードコーディングされた古いクラスに依存する代わりに、値に基づいてクラスを動的に変更する選択ボックスの値の配列に依存するようにしようとしています。私がこれを行っている理由は、選択オプションをクリックする前にクラスが存在しないことがあります。場合によっては、他のセレクターでも機能します。
私が達成しようとしていることをよりよく言うには：
セレクターに選択ボックス値のいずれかのクラスがある場合、このクラスを削除し、最後に選択された値に基づいて新しいクラスを追加します。
だからここに最新のコードがあります：
クラスが追加されますが、前の質問のように、対象のクラスを更新して新しいクラスに置き換えることはできません。他の問題については、コード内のコメントも参照してください。
それが解決されている場合は、気軽にdupとしてマークしてください:)
どんなヒントでも大歓迎です。ありがとう
javascript - 要素の親の後に挿入
以下の例で、test3 クラスの親 (divouter) の後に挿入するには、どのようなセレクターが必要ですか? ありがとう。
jquery - 前に要素を削除するイベント
リンクのいずれかをクリックすると、それを囲むdivouterではなく、その前のdivouterが削除されるように、jQueryでイベントを作成するにはどうすればよいですか?
javascript - jQuery で要素を削除するが、テキストは残す
次のような html があります。
私がしたいのは、jQuery を使用して、添付されたクラスに関係なく div 内のすべてのスパンを削除することですが、スパン タグ内のテキストは残します。したがって、最終結果は次のようになります。
メソッドを使用しようとしましたunwrap()が、div がアンラップされます。また、要素を削除しようとしましたが、要素とそのテキストが削除されます。
asp.net - DOM 要素の作成時に関数を実行する
DOM で一致するオブジェクトが作成されたときに、イベントを特定のクラスと ID にバインドしたいと考えています。
ASP UpdatePanel に jQuery コードがあるため、これを行っています。これにより、部分的なポストバックで DOM が再ロードされます。live() でイベントをリセットしましたが、要素が作成されたらすぐに 2 行の初期化関数を呼び出す必要があります。
これを live() やその他の jQuery 関数にアタッチする方法はありますか、それとも自分でコードを書く必要がありますか?
ありがとう、エド
javascript - javascript dom-injected 要素が IE で css-styling を取得しない
javascript にいくつかの dom 要素を挿入させた後、それらの要素に対して定義された css ルールが IE7 では守られないという奇妙な問題が発生しています (つまり、これらの要素のスタイリングは行われません)。(firefox と chrome は正常に動作しますが、その他はテストされていません)
私が試したこと: - キャッシュをクリア - 他の CSS ルールが優先されることはありません (「より具体的な」スタイルなどはありません)。
JS（本体内）（ここではインジェクションにプロトタイプを使用しましたが、関連しているとは思いません）（JSについて：緯度/経度に基づいてdivに写真を追加するJsonpのトリック）
THE CSS (確かに、ie.css の最後のスタイルとして追加されました)
何が起きているか知っている人はいますか？おそらく、dom が自動的に更新された後、css は css-styling の「再実行」を行いませんか? うーん、ここで推測するだけ..
ありがとう。
javascript - HTMLFontElementオブジェクトでinnerHTMLが機能しないようにするjQuery
varに格納されているhtml内のfont要素の子であるすべての要素を選択するjQueryがあります...アラートを実行して、取得する要素の数を確認します。id="right"html
それは私に次のアラートを与えます：5
しかし、次のいずれかを試しても、アラートは表示されません...
何か案は？
ありがとう、
マット
jquery - jQuery ファイル名の操作
ファンシーなぼかし/フェード効果を実行しようとしていますが(つまり、2つの画像が必要です)、HTMLに1つだけをロードし(jsがアクティブでない場合)、jQueryを介して他のファイル名を追加します(ファイルをコピーして名前を変更します) /src)
純粋な html は次の行に沿っています。
しかし、jquery が DOM を操作した後の html は、次のようにする必要があります。
問題は、相対イメージを複製/コピーしてからsrcの名前を変更するjQueryは何ですか?
どんな助けでも大歓迎です。
A.