用文本隐藏按钮内容

nbnkbykc  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(258)

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

就像胡泽兹那样

源页面
我已经有一个旧代码,可以显示一个部分并删除按钮。。作为一个想法不太实际。。
我需要了解如何调整它,使其仅用文本隐藏数字。我对jquery不太熟悉,必须有更好的提示。

/*Remove Button After Show*/    
 jQuery(document).ready(function($){
        $("#MY_BTN").click(function(){ 
  $('#hide_content').slideToggle('250','swing','hide');
  this.remove();
        });
});
zc0qhyus

zc0qhyus1#

有很多方法可以做到这一点。我会做如下简单的事情。
单击按钮时,文本将更改为 data-text 属性
html:

<button data-text="123 345 565" class="phone-reveal">Call</button>

js:

$('.phone-reveal').on('click', function() {
  $(this).innerText = $(this).data('text');
});
hpcdzsge

hpcdzsge2#

你可以试试这个。使用jquery 3.6版进行测试。单击按钮时,将显示数字。

<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>

相关问题