外部のHTMLファイルからロードするJQueryのswitch文

外部ファイルからdivコンテンツをロードするにはどうしたらいいですか?また、プロセスでcase文を使用しますか?私のJqueryコードに何かがあるかもしれませんか?実際には..私は混乱している?

JQueryコード:

$('.click-test').click(function() {
switch (this.id) {
case "test":
$('#test').load('external-file.html #test');
  break;

  case "test2":
  etc..
  });

htmlページ:

<div class="click-test" id="test">click test</div>
<div id="test">place words from external file here</div>

外部ファイル.html

<div id="test">some words</div>
0
追加された
ビュー: 1

2 答え

jqueryコードは基本的に正しいです。 「this」は、あなたが疑わしく設定されているHTML要素を参照しています。したがって、あなたのスイッチは動作しています。

<div class="click-test" id="test">click test</div>

しかし、両方のIDが "test"の基本HTMLページに2つのdivがあります。すべてのIDはHTMLページ(読み込んでいるコンテンツを含む)上で一意でなければなりません。したがって、少しリファクタリングする必要があります。

たとえば、HTMLを次のように変更することができます。

<div class="click-test" data-loadid="test">click test</div>

そしてJavaScriptは次のようになります:

$('.click-test').click(function() {
    switch($(this).attr("data-loadid")) {

これは、jQueryの属性関数を使用して 'data-loadid'という名前の属性から読み込みます。その後、あなたが行ったように、loadを使用して外部divコンテンツをロードすることができます。 (ただし、不要なのでブックマークを削除することはできますか?)

0
追加された

このオブジェクトはID属性を持たない.click-test divなので、this.idは何も返さない。あなたの.html #testの後にスペースバーが必要かどうかわからないことを除いて、他のすべてはうまく見えます

0
追加された
私の答えで述べたように、両方のdivにはID属性があります。残念ながら、彼らは同じです。
追加された 著者 WiredPrairie,
うーん、私はそれを読んで初めてそれを逃したと思う。問題は、同じIDを2つ持つこと、同じIDを2つ持つことができないこと、jQueryが最初に見つけて、他のものを探すことではないということです。
追加された 著者 Niels,