概要
このページでは、エディターでのデザイン案作成時に使える、URLを取得し、動的なリンクを作る方法について記載します。
デザイン案にて、リンクを手動で記述してしまうと、固定化が起き、思わぬ不具合に繋がる場合がありますので、aタグの周りを編集したり、ページ内に存在するリンクを増設する際に参照ください。
「固定化」については、 デザイン案不具合の原因となる動的要素の固定化について をご確認ください。
※ 一例として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属性」に記述されている情報を取得するものです。
こうすることで、href属性に指定されているリンクが動的に変わっても、その時その時の値を取得し、反映することができます。
href属性以外にも、()内に記述されている情報を変更すると、それに対応した情報が取得できます。
- .attr("style") –> 要素に設定されたstyle(CSS)情報を取得できます
- .attr("onclick") –> 要素に設定されたonclick情報を取得できます
0 コメント