このページについて

このページでは、動的なリンク先を使った投稿の作り方について説明します。

※ 一例としてaタグのhrefで説明しておりますが、inputタグのtypeやvalue、divタグのonclickなどその他の編集にも有効な編集方法になります。

HTML を編集 機能を利用する際の注意点

UI エディターの HTML を編集 機能を利用する際、対象の要素内に、リンク (<a> タグ) を含む場合、編集を開始した時点のリンク先 (href 属性) を、デザイン案の JavaScript コードに記録します。

対象サイトがそのリンク先を動的に変更している場合、
デザイン案描画時に、そのリンク先で上書きをしてしまう問題が発生します。

$("#registration").html("<p>今すぐ<a href=\"/regist?track_id=1234\">会員登録</a></p>")

仮に上記の様なコードで、対象サイトが track_id パラメータの値を動的に生成している場合、1234 に固定されてしまいます。

編集する

この問題に対応するために、オリジナルのリンク先を参照する様に UI エディター左下にある、JavaScript タブを開き、修正を行います。

$("#registration").html("<p>今すぐ<a href=\"" + $("#registration a").attr("href") + "\">会員登録</a></p>")

使用しているコード

$("対象のaタグ").attr("href");

このコードは aタグ の hrefに記述されている情報 を取得するものです。
()内に記述されている情報を変更すると、それに対応した情報が取得できます。

• .attr(“style”) –> 要素に設定されたstyle情報を取得できます
• .attr(“onclick”) –> 要素に設定されたonclick情報を取得できます。