バックエンドから来る動的データをattr（）jquery関数に入れる方法は？

Question

Javascriptからいくつかの属性を付ける必要があります。メインコードがjspファイルであるファイルを編集することができないからです（どうして私に質問しないでください）。

あなたは要素が表示された場合、それは次のようになります。

<a class="callBtn dartClick callfix" 
    name="contact_us_purchase" dartId="2014_HLI_HLG_Home_Call_Us_CTA_OnClick" 
    href="tel:1-<loans:fmtPhone phone="${contactPhoneNumber}" 
    separator="-" areaCodeParens="false" />">Call</a> 

そして、これはこれまでのところ、私のjqueryのコードです：

var contact = $("[name='contact_us_equity']"); 
contact.attr({ 
    'href': 'tel:1-<loans:fmtPhone phone="${contactPhoneNumber}"', 
    'separator': '-', 
    'areaCodeParens': 'false' 
}); 

これに伴う問題、href要素がレンダリングされていることですそれはHTMLのようにこのように見える：

<a class="callBtn dartClick callfix" 
    name="contact_us_equity" dartid="2014_HLI_HLG_Home_Call_Us_CTA_OnClick" 
    href="tel:1-&lt;loans:fmtPhone phone=&quot;${contactPhoneNumber}&quot;" 
    separator="-" areacodeparens="false">Call</a> 

何か提案がありますか？

Answer 1

あなたが正しく理解していれば、実際にHTML要素「looks &がどのように動作するか」を実際に変更することなく、HTML内に任意のデータプロパティを格納したいと考えています。

これを実現するには、例えば、$().data()を使用することができます。

var myData = 'tel:1-<loans:fmtPhone phone="${contactPhoneNumber}"'; 

$("[name='contact_us_equity']").data("href", myData); 

あなたはまた、すべての新規属性のdata-接頭辞を使用して、$().attr()を使用することができます。

var myData = 'tel:1-<loans:fmtPhone phone="${contactPhoneNumber}"'; 

$("[name='contact_us_equity']").attr("data-href", myData); 

の唯一の違いそれらは、前者がDOMツリー自体を変更しないということです - それはjQueryの内部構造の中にデータを格納します。

Answer 2

これは...ファイン

var contact = $("[name='contact_us_purchase']"); 
 
contact.attr({ 
 
    'href': 'tel:1-<loans:fmtPhone phone="${contactPhoneNumber}"', 
 
    'separator': '-', 
 
    'areaCodeParens': 'false' 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a 
 
    class="callBtn dartClick callfix" 
 
    name="contact_us_purchase" 
 
    dartId="2014_HLI_HLG_Home_Call_Us_CTA_OnClick" 
 
    separator="- " 
 
    areaCodeParens="false" />Call</a> 
 
<br/> 
 
(Right click and inspect to see the href)

Answer 3

$(document).ready(_ => { 
 
    var contact = $('[name=contact_us_purchase]'); 
 
    contact.attr('href', 'tel:1-<loans:fmtPhone phone="${contactPhoneNumber}" separator="-" areaCodeParens="false" />'); 
 
    console.log(contact.attr('href')) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="callBtn dartClick callfix" name="contact_us_purchase">Call</a>