如何编写Javascript，根据每个链接的子元素的文本内容，为每个链接提供一个要跳转到的自定义URL？

Question

我想知道是否有可能编写一个Javascript，为每个链接提供一个自定义格式URL来点击。

<!-- example set one -->
<a href="javascript:myfunction()" class="relative-url" target="_blank">
  <span id="input01">campfire<span>
  <span id="input02">red<span>
</a>
<!-- example set two -->
<a href="javascript:myfunction()" class="relative-url" target="_blank">
  <span id="input01">pepe<span>
  <span id="input02">green<span>
</a>

如何编写自定义的javascript来为每个<a class="relative-url">制定一个URL？

<script>
 // use text content of child element id=input01 and id=input02 to 
 // formulate an URL for it's parent div or <a>
 // eg. https://www.example.com?type=campfire&color=red
 // eg. https://www.example.com?type=pepe&color=green
</script>

有什么好主意吗？非常感谢~

Answer 1

如果您想在运行时执行此操作，您可以这样做。我用jQuery，因为你在你的问题中标注了它。

​

 $('.relative-url').each(function() {
      let type = $(this).find('.input01').text();
      let color = $(this).find('.input02').text();
      this.href = `https://www.example.com?type=${type}&color=${color}`
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- example set one -->
<a class="relative-url" target="_blank">
  <span class="input01">campfire</span>
  <span class="input02">red</span>
</a>
<br/>
<!-- example set two -->
<a class="relative-url" target="_blank">
  <span class="input01">pepe</span>
  <span class="input02">green</span>
</a>

​

Answer 2

虽然您已经接受了一个答案，但我认为我应该提供一种非jQuery方法，以防这可能有帮助；解释性注释在代码中：

​

// caching a refernce to the document, and some helper functions as I don't
// enjoy repetitive typing all that much:
const D = document,
  get = (sel, ctx = D) => ctx.querySelector(sel),
  getAll = (sel, ctx = D) => [...ctx.querySelectorAll(sel)],
  // a simple function to update an element with new properties ('props'):
  update = (elem, props) => Object.assign(elem, props),
  // a named function that takes an element (though it realistically
  // should be a HTMLAnchorElement):
  createURL = (elem) => {
    // here we use destructuring to declare the variables of type and color
    // to the text-content of each of the <span> elements found within the
    // current element, after we trim the leading/trailing white-space:
    let [type, color] = getAll('span', elem).map((el) => el.textContent.trim());
    // calling the update() function, passing in the current element
    // and an object of properties to update with the new property-value:
    update(elem, {
      href: `${elem.href}?type=${type}&color=${color}`
    });
  };

// retrieves all <a> elements in the document, and iterates over that Array
// of nodes and calling the createURL() function on each of them:
getAll('a').forEach(createURL);

*,
 ::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  display: block;
  padding: 0.25em 0.5em;
  border: 1px solid currentColor;
  border-radius: 0.6em;
  color: #363;
  margin: 1em auto;
  inline-size: fit-content;
}

a::after {
  content: '(URL: "' attr(href) '")';
}

<!-- example set one -->
<a href="#" class="relative-url" target="_blank">
  <span>campfire</span>
  <span>red</span>
</a>
<!-- example set two -->
<a href="#" class="relative-url" target="_blank">
  <span>pepe</span>
  <span>green</span>
</a>

​

JS Fiddle演示。

参考文献：

• Array.prototype.forEach()。
• 解构作业。
• document.querySelector()。
• document.querySelectorAll()。
• Element.querySelector()。
• Element.querySelectorAll()。
• Object.assign()。