使链接在完全显示时可单击

Question

我的网站上有一个电话号码的链接。数字中的最后四个数字是隐藏的，所以要查看完整的数字，您应该点击它。

我想让你喜欢当你点击数字与隐藏数字，它显示了完整的数字，然后你点击它来进行一个调用(添加属性href="+0000000001111")

​

jQuery('body').delegate('#phone-number[data-replace]', 'click', function(event) {
  event.preventDefault();
  var older_value = jQuery(this).html();
  jQuery(this)
    .html(jQuery(this)
      .attr('data-replace'));
  $("#phone-number").attr("href=tel:+0000000001111");
});

#phone-number {
  font-size: 20px;
  font-family: Intro, impact;
  text-decoration: none !important;
  color: rgb(70, 70, 70) !important;
  cursor: pointer;
}

.hidden_number {
  width: 100%;
  text-align: center;
  padding: 10px;
}

<div>
  <a id="phone-number" data-replace="+00 0000 0001111">+00 0000 000XXXX</a>
</div>

​

http://jsfiddle.net/kerm131/5musfxb0/2/

Answer 1

我会对您的代码做一些修改：

​

jQuery('body').one('click', '#phone-number[data-replace]', function(event){  // use one instead of delegate as delegate has been deprecated and you only want to run this once
    event.preventDefault();
    var $this = jQuery(this),
        older_value = $this.html(),
        number = $this.attr('data-replace');
    
    $this
      .html(number)                     // change number
      .attr('href', 'tel:' + number)    // change href
      .get(0).click();                  // fire click - optional, leave off if you want user to have to click again
});

#phone-number {
  font-size: 20px;
  font-family: Intro, impact;
  text-decoration: none !important;
  color: rgb(70, 70, 70) !important;
  cursor: pointer;
}

.hidden_number {
  width: 100%;
  text-align: center;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a id="phone-number" data-replace="+00 0000 0001111">+00 0000 000XXXX</a>
</div>

​

Answer 2

添加href属性-

$( "#phone-number" ).attr( "href","tel:"+ jQuery(this).attr('data-replace'));

Answer 3

考虑更新这一行：$(“#电话号码”).attr( "href=tel:+0000000001111“)；

到这个

$(“#电话号码”).attr( "href"，"tel:+0000000001111“)；

同时，...and也可以从移动设备上尝试。这个功能在桌面上很糟糕。