如何使此代码与 .each 函数一起使用？

Question

我需要在脚本标记中使用以下代码来处理页面上的所有 #tel ID 元素。我只能让它为第一个 #tel 元素工作。我一直在尝试使用 .each 函数 - 但运气不好...

原因是我在这里似乎找不到满足我需要的 ACF 中继器 URL。动态内容 link 部分的高级部分未显示。所以我试图为此在 HTML 小部件中进行破解。但我需要它适用于按钮 ID #tel.

的所有按钮

代码如下：

var link = document.getElementById('tel');
var href = link.getAttribute('href');

link.setAttribute('href', href.replace('http://', 'tel:'));

<div class="elementor-button-wrapper">
    <a href="http://44400907" class="elementor-button-link elementor-button elementor-size-xs" role="button" id="tel">
        <span class="elementor-button-content-wrapper">
            <span class="elementor-button-text elementor-inline-editing" data-elementor-setting-key="text" data-elementor-inline-editing-toolbar="none">
                44 40 09 07
            </span>
        </span>
    </a>
</div>

Answer 1

在 HTML/javascript 中，元素 ID 必须是唯一的。因此，在您的情况下，您可以为此使用 class：

var links = document.querySelectorAll('.tel');
for(let i = 0; i < links.length; i++)
{
  let link = links[i];
  var href = link.getAttribute('href');

  link.setAttribute('href', href.replace('http://', 'tel:'));
}

<div class="elementor-button-wrapper">
            <a href="http://44400907" class="elementor-button-link elementor-button elementor-size-xs tel" role="button">
                        <span class="elementor-button-content-wrapper">
                        <span class="elementor-button-text elementor-inline-editing" data-elementor-setting-key="text" data-elementor-inline-editing-toolbar="none">44 40 09 07</span>
                </span>
            </a>
    </div>
    
<div class="elementor-button-wrapper">
            <a href="http://44400908" class="elementor-button-link elementor-button elementor-size-xs tel" role="button">
                        <span class="elementor-button-content-wrapper">
                        <span class="elementor-button-text elementor-inline-editing" data-elementor-setting-key="text" data-elementor-inline-editing-toolbar="none">44 40 09 08</span>
                </span>
            </a>
    </div>

<div class="elementor-button-wrapper">
            <a href="http://44400909" class="elementor-button-link elementor-button elementor-size-xs tel" role="button">
                        <span class="elementor-button-content-wrapper">
                        <span class="elementor-button-text elementor-inline-editing" data-elementor-setting-key="text" data-elementor-inline-editing-toolbar="none">44 40 09 09</span>
                </span>
            </a>
    </div>

如何使此代码与 .each 函数一起使用？

How to make this code work with .each function?

html

javascript

jquery

elementor