查找按钮代码/再现效果

wljmcqd8 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(375)

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

就像胡泽兹那样

源页面
我已经有了一个应该复制它的代码。。但它不起作用（UncaughtTypeError:undefined不是函数）
我想知道如何查看或检索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免费0插件和修改
更新

谢谢你的代码我不能让它正常工作
如果可能的话，你能和我在同一个开发环境中测试吗？或任何本地主机开发人员
我用的最快最简单的
拉拉贡
wordpress 5.8
elementor免费
你真的必须看到它，按钮无法理解正在发生的事情。。它执行相反的操作，按钮完全更改，而不是仅更改文本。
必须处于相同的环境中。。我的印象是elementor总是将最明显、最简单的操作复杂化。他什么都不想听。。。
很抱歉暴露出非常无聊的问题来解决。。
要是我们能看到或提取houzez给他们的按钮写的脚本就好了

wordpress jquery Button elementor

来源：https://stackoverflow.com/questions/68522078/find-the-button-code-reproduce-the-effect

2条答案

按热度按时间

nlejzf6q1#

你根本不需要任何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>

赞(0）回复(0）举报 2021-09-13

myzjeezk2#

您的函数使用 $ 函数-尚未定义。您需要在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>

赞(0）回复(0）举报 2021-09-13

我来回答

查找按钮代码/再现效果

2条答案

相关问题

热门标签

最新问答