时间戳

首页 > 解决方案 > 如何使此代码与 .each 函数一起使用？

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

问题描述

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

原因是我似乎无法在这里获得满足我需要的 ACF 转发器 URL。动态内容链接部分的高级部分未显示。因此，我试图为此在 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>

标签： javascripthtmljqueryelementor

解决方案

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

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>

推荐阅读