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

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

我会对您的代码进行一些更改：

python setup.py install

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

Answer 2

添加href属性-

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

Answer 3

考虑更新此行： $（“＃phone-number”）.attr（“ href = tel：+0000000001111”）;

对此

$（“＃phone-number”）.attr（“ href”，“ tel：+0000000001111”）;

...，甚至可以从移动设备上尝试。此功能在台式机上性能很差。