jquery - 找到按键代码/重现效果

Question

我正在寻找允许我在elementor按钮上放置“呼叫”或“显示号码”的 jquery 代码，因为我需要隐藏号码。

像 houzez 一样

源页面

我已经有一个应该重现它的代码.. 但它不起作用（未捕获的类型错误：未定义不是函数）

我想知道如何查看或检索 houzez 网站使用的代码/脚本..

在 chrome dev 上我很难找到它..

我知道如何找到 css 但不知道脚本 .. 不知道是否已经有可能

欢迎任何帮助

 <button data-number="123 345 565" class="phone-reveal">Call</button>
    <script>
        jQuery(document).ready(function () {
            $('.phone-reveal').on('click', function () {
                let phone = jQuery(this).data('number')
                jQuery(this).text(phone)
            });
        })
        
    </script>

我的配置全新安装 wp 5.8 + elementor free 0 插件和修改

更新

感谢您的代码，我无法使其正常工作

如果可能的话，你能在和我一样的开发环境中测试吗？或任何本地主机开发

我用的最快最简单的

拉贡

WordPress 5.8

无元素

你真的必须看到它按钮无法理解正在发生的事情..它会反向并且按钮完全改变而不是仅仅改变文本。

有必要在同一个环境中.. 我的印象是 elementor 总是使最明显和最简单的操作复杂化。他什么都不想听……

很抱歉暴露了非常无聊的问题来解决..

如果我们能看到或提取 houzez 为他们的按钮制作的脚本就好了

Answer 1

你根本不需要任何 JS。
只有 CSS:active和::after伪

[data-number]:active span   {display: none;}
[data-number]:active::after {content: attr(data-number);}

/* irrelevant styles - only for this demo to pimp it up a bit */
button {
  color: #6ec1e4;
  border-radius: 0.4em;
  border: 1px solid currentColor;
  background: none;
  padding: 0.5em;
  min-width: 10em;
  cursor: pointer;
}

<button type="button" data-number="123 345 565"><span>Call</span></button>

Answer 2

您的函数使用$尚未定义的函数。您需要在 elementor WP 站点中明确定义它。

jQuery($ => { // DOM ready and alias in scope
  $('body').on("click", function(e) {
    let txt = "Call";
    if ($(e.target).hasClass('phone-reveal')) txt = $(e.target).data('number')
    $('button.phone-reveal').text(txt);
  });
});

body{
background-color:#333;
height:100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button data-number="123 345 565" class="phone-reveal">Call</button>