1

画像ギャラリーの特定のサムネイル/リンクに対応する情報を反映するために、「キャプション」divのコンテンツを動的に変更する最も簡単なアプローチは何でしょうか。

具体的には、このリンクにアクセスすると、すばらしいSeadragonズームスクリプトが表示されます。画像の下に、ユーザーが上記のさまざまなリンクをクリックすると（テキスト）コンテンツが変わる小さなキャプションが表示されます。おそらく、altまたはtitle属性からテキストを取得し、空のdivに配置しますか？

私の場合、テキストリンクの代わりにサムネイルを使用するので、これらの画像をクリックすると、ユーザーは「switchTo」Seadragonイベントを開始し、空のdivに対応するコンテンツを入力します。

ここでのガイダンスに感謝します。

4

1 に答える 1

2

divのIDがある場合、最も簡単な方法は次を使用することinnerHTMLです。

document.getElementById(id).innerHTML = "text";

これは、div内のすべてのテキストを置き換えるなどの単純な場合には問題ありません。div内に他のhtml要素を含めるなど、より複雑なことをしたい場合、この方法は最良の選択ではありません。

divタグにhtml要素を追加する場合は、を避ける必要がありますinnerHTML。たとえば、imgタグである変数imgがある場合は、これを使用してdivに追加します。

document.getElementById(id).appendChild(img);

これよりも複雑なことをしたい場合は、jQueryのような素晴らしいフレームワークの使用を検討する必要があります。このようなものには多すぎるかもしれませんが、他のことを計画している場合は、フレームワークを使用する価値があります。

jQueryでこれを実行する場合は、次の関数のいくつかを使用して実行できます。

var div = $("#id");// jQuery uses CSS selectors to get elements.
div.append("New content");// Puts the new content at the end.
div.empty();// Gets rid of everything inside the div.
div.append(element);// You can also append elements.

// For example, you can create and append an image to the div:
var img = $("<img>");
img.attr("src", "images/something.png");
div.append(img);
于 2011-04-14T23:24:49.473 に答える