在 FormAssembly 表单上使用 Javascript 的动态可点击链接——不在可重复的部分中

Question

需要在页面上创建不同链接的列表，并在每个 url 的末尾附加相同的变量。

例如：

https://example.tfaforms.net/formA?urlParam=ABCDEFG

https://example.tfaforms.net/formB?urlParam=ABCDEFG

https://example.tfaforms.net/formC?urlParam=ABCDEFG

https://example.tfaforms.net/formD?urlParam=ABCDEFG

FormAssembly 在此页面上提供了一个示例，其中他们演示了如何使用 Javascript 在具有动态可点击链接的页面上创建可重复的部分，以替换 html 代码中的 url 附加参数：

https://www.formassembly.com/blog/dynamic-clickable-links/

**他们使用这个 html 代码：**

<a href="https://instanceName.tfaforms.net/secondFormID?urlParam=#" class="clickableLink">Text to display for your link</a>

除了这个javascript：

<script
   src="https://code.jquery.com/jquery-3.2.0.min.js"
   integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
   crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
   //declares function to replace href in hyperlink text with value of a field in repeat section 
  function dynamicLinks(linkClass, fieldId) {
      //creates selector statement with fieldId
      var selection = 'input[id^="' + fieldId + '"]';
      //intializes array to store new links
      var linkArr = [];
      //adds links to array from field in repeat section
      $(selection).each(function() {
        linkArr.push($(this).val());
      });
       //replaces the class of hyperlinks with values from the link array
       $(linkClass).attr("href", function(i, origLink) {
      return origLink.replace(/#/, linkArr[i]);    
       });
     };
  // This is the field ID to update with your value from Salesforce field ID
  dynamicLinks(".clickableLink","tfa_2");  
});
</script>

但是，我的用例是类似内容的列表中的多个链接，所有链接的末尾都具有相同的 urlParam=#。此外，我不需要可重复部分功能，只需要 Javascript 在 html 中查找所有 # 并替换为相同的 tfa_2。

使用 FormAssembly 示例代码，我认为我可以在每一行链接上构建 html，并将每个 # 替换为 tfa_2 - 然而，它仅在第一个链接上执行替换功能。

Answer 1

我能够通过为每个链接使用不同的类来实现这一点：

<a href="https://example.tfaforms.net/formA?urlParam=#" class="clickableLink1">Text to display for your link</a>
<a href="https://example.tfaforms.net/formB?urlParam=#" class="clickableLink2">Text to display for your link</a>
<a href="https://example.tfaforms.net/formC?urlParam=#" class="clickableLink3">Text to display for your link</a>

然后我在脚本末尾将每个类添加为一行，用分号分隔：

<script
   src="https://code.jquery.com/jquery-3.2.0.min.js"
   integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
   crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
   //declares function to replace href in hyperlink text with value of a field in repeat section 
  function dynamicLinks(linkClass, fieldId) {
      //creates selector statement with fieldId
      var selection = 'input[id^="' + fieldId + '"]';
      //intializes array to store new links
      var linkArr = [];
      //adds links to array from field in repeat section
      $(selection).each(function() {
        linkArr.push($(this).val());
      });
       //replaces the class of hyperlinks with values from the link array
       $(linkClass).attr("href", function(i, origLink) {
      return origLink.replace(/#/, linkArr[i]);    
       });
     };
  // This is the field ID to update with your value from Salesforce field ID
  dynamicLinks(".clickableLink1","tfa_2");
  dynamicLinks(".clickableLink2","tfa_2");
  dynamicLinks(".clickableLink3","tfa_2");
});
</script>

希望有帮助！