7

私はリンクのリストを作成してきましたが、そのすべてがクリックするとdivのコンテンツを別の特定のコンテンツ（名前、Webサイト、連絡先などの約4行）に変更するはずです。

私はこのコードを見つけました：

<script type="text/javascript">
    function ReplaceContentInContainer(id,content) {
        var container = document.getElementById(id);
        container.innerHTML = content;
    }
</script>

そしてそれをそのように使用しました：

<li class="pl11">
    <a href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>')">Pomorskie</a>
</li>

そして、それは私が期待したようには機能しません。

ハイパーリンクのテキストを「Pomorskie」から「superlink」に変更します。

プレーンテキストは問題なく機能しますが、リンクが必要です。

これがhttp://xn--pytyfundamentowe-jyc.pl/projektanci/kontakty-p/です（そのうちの2つだけが何かを表示します）

しかし、すべての推奨事項を試した後、＃linksを使用して別のdivにジャンプすると思います。これでは、何も機能しませんでした：/

試してくれてありがとう、そして乾杯:)

4

3 に答える 3

6

これを完全に横向きに見るのと同じように、入れ子の奇妙さ/複雑さを避け、問題を減らすことをお勧めします。

<div id="replacements">...</div>非表示 (つまり)にコンテンツを設定し、必要なinnerHTMLノードから を取得して、それで完了します。

そうすることで、非開発者から代替コンテンツを入手するのもはるかに簡単になります。チームに所属している場合は、うまく機能します。

// Probably better in a separate helpers.js file.
   function replaceContentInContainer(target, source) {
      document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
   }

次のように制御します: (それをなくしてonClick を使用します。イベント ハンドラーhref=javascript:として使用する方が適切ですが、簡潔にするために、ここでは onClick 属性としてインライン化し、ボタンを使用します。)

<button onClick="replaceContentInContainer('target', 'replace_target')">Replace it</button>

ドキュメントのどこかにターゲットがあります。

<div id="target">My content will be replaced</div>

次に、置換コンテンツは置換 div 内に隠されます。

<div id="replacements" style="display:none">
  <span id="replace_target"><a href="http://address.com">superlink</a></span>
</div>

ここにJSBinがあります

Handlebarsまたは別の優れた JS テンプレート ライブラリを使用して、この動的な性質を改善しますが、これは OP の課題です。

編集: 注意、先頭の小文字で関数に名前を付け、クラス名の先頭の大文字スタイルを予約する必要があります。var mySweetInstance = new MySpecialObject();

于 2012-12-20T02:18:28.640 に答える
4

引用符が一致しません！そのため、クリックすると JavaScript エラーが発生します。

ブラウザには次の文字列が表示されます。

href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>')">Pomorskie<

なので：

href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="

中の " を に変更@quot;

<li class="pl11">
    <a href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href=@quot;http://address.com@quot;>superlink</a>')">Pomorskie</a>
</li>

フィドルの例。

また、JavaScript に href タグを使用することは悪い習慣です。

于 2012-12-20T00:52:51.973 に答える
0

ネストされた引用符に問題があります。DOM インスペクターを見て、HTML パーサーがそこから何を構築したかを確認してください! (たとえば、このデモでは)

&quot;属性内の引用符をまたはとして HTML エスケープするか&#34;、アポストロフィに変換して JS 文字列内でバックスラッシュでエスケープする必要があります。

<a href="j[…]r('wojewodztwo', '<a href=&quot;http://address.com&quot;>superlink</a>')">…
<a href="j[…]r('wojewodztwo', '<a href=\'http://address.com\'>superlink</a>')">…

こことここで動作するデモを参照してください。

-pseudo-urlonclickの代わりに属性を使用することをお勧めします。javascript

<a onclick="ReplaceContentInContainer('wojewodztwo', …)">Pomorskie</a>

またはJavaScriptに登録されたイベントハンドラーでさえ：

<li class="pl11">
    <a id="superlink">Pomorskie</a>
</li>
<script type="text/javascript">
    function replaceContentInContainer(id,content) {
        var container = document.getElementById(id);
        container.innerHTML = content;
    }
    document.getElementBId("superlink").onclick = function(event) {
        replaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>');
        event.prevenDefault();
    };
</script>

(デモ)

于 2012-12-20T00:55:47.903 に答える